@gusto/embedded-react-sdk 0.55.6 → 0.55.8

package/dist/components/Contractor/Payments/PaymentsList/PaymentsList.js

@@ -1,102 +1,104 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useState as b, useMemo as a, useCallback as B } from "react";
-import { keepPreviousData as G } from "@tanstack/react-query";
-import { useContractorPaymentGroupsGetList as Y } from "@gusto/embedded-api/react-query/contractorPaymentGroupsGetList";
-import { useInformationRequestsGetInformationRequestsSuspense as v } from "@gusto/embedded-api/react-query/informationRequestsGetInformationRequests";
-import { InformationRequestStatus as g } from "@gusto/embedded-api/models/components/informationrequest";
-import { PaymentsListPresentation as U } from "./PaymentsListPresentation.js";
-import { useComponentDictionary as W } from "../../../../i18n/I18n.js";
-import { BaseComponent as x, BaseLayout as F } from "../../../Base/Base.js";
+import { jsx as i } from "react/jsx-runtime";
+import { useState as B, useMemo as c, useCallback as G } from "react";
+import { keepPreviousData as Y } from "@tanstack/react-query";
+import { useContractorPaymentGroupsGetList as v } from "@gusto/embedded-api/react-query/contractorPaymentGroupsGetList";
+import { useInformationRequestsGetInformationRequestsSuspense as U } from "@gusto/embedded-api/react-query/informationRequestsGetInformationRequests";
+import { InformationRequestStatus as h } from "@gusto/embedded-api/models/components/informationrequest";
+import { PaymentsListPresentation as W } from "./PaymentsListPresentation.js";
+import { useComponentDictionary as x } from "../../../../i18n/I18n.js";
+import { BaseComponent as F, BaseLayout as H } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
-import { componentEvents as c } from "../../../../shared/constants.js";
-import { usePagination as H } from "../../../../hooks/usePagination/usePagination.js";
-function it(t) {
-  return /* @__PURE__ */ r(V, { ...t });
+import { componentEvents as m } from "../../../../shared/constants.js";
+import { usePagination as V } from "../../../../hooks/usePagination/usePagination.js";
+function at(t) {
+  return /* @__PURE__ */ i(j, { ...t });
 }
-function V(t) {
-  return /* @__PURE__ */ r(x, { ...t, children: /* @__PURE__ */ r(z, { ...t, children: t.children }) });
+function j(t) {
+  return /* @__PURE__ */ i(F, { ...t, children: /* @__PURE__ */ i(J, { ...t, children: t.children }) });
 }
-const j = (t = 3) => {
-  const s = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
-  return e.setMonth(e.getMonth() - t), s.setMonth(s.getMonth() + (12 - t)), {
-    startDate: e.toISOString().split("T")[0] || "",
-    endDate: s.toISOString().split("T")[0] || ""
+const z = (t = 3) => {
+  const n = /* @__PURE__ */ new Date(), r = /* @__PURE__ */ new Date();
+  return r.setMonth(r.getMonth() - t), n.setMonth(n.getMonth() + (12 - t)), {
+    startDate: r.toISOString().split("T")[0] || "",
+    endDate: n.toISOString().split("T")[0] || ""
   };
-}, z = ({
-  companyId: t,
-  dictionary: s,
-  onEvent: e,
-  alerts: R,
-  LoaderComponent: h
+}, J = ({
+  className: t,
+  companyId: n,
+  dictionary: r,
+  onEvent: s,
+  alerts: l,
+  LoaderComponent: C
 }) => {
-  W("Contractor.Payments.PaymentsList", s);
-  const [m, C] = b(3), { currentPage: T, itemsPerPage: D, getPaginationProps: O } = H(), { startDate: y, endDate: A } = a(() => j(m), [m]), { data: u, isFetching: M } = Y(
+  x("Contractor.Payments.PaymentsList", r);
+  const [u, T] = B(3), { currentPage: D, itemsPerPage: O, getPaginationProps: y } = V(), { startDate: A, endDate: M } = c(() => z(u), [u]), { data: p, isFetching: w } = v(
     {
-      companyId: t,
-      startDate: y,
-      endDate: A,
-      page: T,
-      per: D
+      companyId: n,
+      startDate: A,
+      endDate: M,
+      page: D,
+      per: O
     },
-    { placeholderData: G, throwOnError: !0 }
-  ), p = u?.contractorPaymentGroupWithBlockers || [], { data: w } = v({
-    companyUuid: t
-  }), f = w.informationRequests ?? [], _ = a(() => p.some((n) => (n.creditBlockers || []).some((i) => {
-    if (i.status !== "unresolved") return !1;
-    const o = i.unblockOptions?.find(
-      (E) => E.unblockType === "submit_wire"
+    { placeholderData: Y, throwOnError: !0 }
+  ), f = p?.contractorPaymentGroupWithBlockers || [], { data: _ } = U({
+    companyUuid: n
+  }), R = _.informationRequests ?? [], I = c(() => f.some((e) => (e.creditBlockers || []).some((a) => {
+    if (a.status !== "unresolved") return !1;
+    const o = a.unblockOptions?.find(
+      (b) => b.unblockType === "submit_wire"
     );
     return o && "metadata" in o && o.metadata.wireInRequestUuid;
-  })), [p]), l = B(() => {
-    e(c.CONTRACTOR_PAYMENT_RFI_RESPOND);
-  }, [e]), P = a(() => {
-    const n = [], d = f.some(
-      (o) => o.status === g.PendingResponse
-    ), i = f.some(
-      (o) => o.status === g.PendingReview
+  })), [f]), P = G(() => {
+    s(m.CONTRACTOR_PAYMENT_RFI_RESPOND);
+  }, [s]), d = c(() => {
+    const e = [], g = R.some(
+      (o) => o.status === h.PendingResponse
+    ), a = R.some(
+      (o) => o.status === h.PendingReview
     );
-    return d ? n.push({
+    return g ? e.push({
       type: "error",
       title: "rfiPendingResponseTitle",
       content: "rfiPendingResponseDescription",
-      onAction: l,
+      onAction: P,
       actionLabel: "rfiRespondCta"
-    }) : i && n.push({
+    }) : a && e.push({
       type: "info",
       title: "rfiPendingReviewTitle",
       content: "rfiPendingReviewDescription"
-    }), n;
-  }, [f, l]), I = () => {
-    e(c.CONTRACTOR_PAYMENT_CREATE);
-  }, N = () => {
-    e(c.CONTRACTOR_HISTORICAL_PAYMENT_CREATE);
-  }, L = (n) => {
-    C(n);
-  }, S = (n) => {
-    e(c.CONTRACTOR_PAYMENT_VIEW, { paymentId: n });
-  }, q = a(() => [...P, ...R || []], [P, R]);
-  if (!u)
-    return /* @__PURE__ */ r(F, { isLoading: !0, LoaderComponent: h });
-  const k = O(u.httpMeta.response.headers, M);
-  return /* @__PURE__ */ r(
-    U,
+    }), e;
+  }, [R, P]), N = () => {
+    s(m.CONTRACTOR_PAYMENT_CREATE);
+  }, L = () => {
+    s(m.CONTRACTOR_HISTORICAL_PAYMENT_CREATE);
+  }, S = (e) => {
+    T(e);
+  }, q = (e) => {
+    s(m.CONTRACTOR_PAYMENT_VIEW, { paymentId: e });
+  }, k = c(() => [...d, ...l || []], [d, l]);
+  if (!p)
+    return /* @__PURE__ */ i(H, { isLoading: !0, LoaderComponent: C });
+  const E = y(p.httpMeta.response.headers, w);
+  return /* @__PURE__ */ i(
+    W,
     {
-      contractorPayments: p,
-      numberOfMonths: m,
-      onCreatePayment: I,
-      onCreateHistoricalPayment: N,
-      onDateRangeChange: L,
-      onViewPayment: S,
-      alerts: q,
-      companyId: t,
-      hasUnresolvedWireInRequests: _,
-      onEvent: e,
-      paginationProps: k
+      className: t,
+      contractorPayments: f,
+      numberOfMonths: u,
+      onCreatePayment: N,
+      onCreateHistoricalPayment: L,
+      onDateRangeChange: S,
+      onViewPayment: q,
+      alerts: k,
+      companyId: n,
+      hasUnresolvedWireInRequests: I,
+      onEvent: s,
+      paginationProps: E
     }
   );
 };
 export {
-  it as PaymentsList,
-  V as PaymentsListInternal
+  at as PaymentsList,
+  j as PaymentsListInternal
 };
 //# sourceMappingURL=PaymentsList.js.map

package/dist/components/Contractor/Payments/PaymentsList/PaymentsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentsList.js","sources":["../../../../../src/components/Contractor/Payments/PaymentsList/PaymentsList.tsx"],"sourcesContent":["import { useState, useMemo, useCallback } from 'react'\nimport { keepPreviousData } from '@tanstack/react-query'\nimport { useContractorPaymentGroupsGetList } from '@gusto/embedded-api/react-query/contractorPaymentGroupsGetList'\nimport { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'\nimport { InformationRequestStatus } from '@gusto/embedded-api/models/components/informationrequest'\nimport type { InternalAlert } from '../types'\nimport { PaymentsListPresentation } from './PaymentsListPresentation'\nimport { useComponentDictionary } from '@/i18n'\nimport { BaseComponent, BaseLayout, type BaseComponentInterface } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\nimport { usePagination } from '@/hooks/usePagination/usePagination'\n\n/**\n * Props for {@link PaymentsList}.\n *\n * @public\n */\nexport interface PaymentsListProps extends BaseComponentInterface<'Contractor.Payments.PaymentsList'> {\n  /** UUID of the company whose contractor payment groups should be listed. */\n  companyId: string\n}\n\n/**\n * Props for the flow-internal {@link PaymentsListInternal}, which layers\n * flow-injected alerts on top of the public {@link PaymentsListProps}.\n *\n * @internal\n */\nexport interface PaymentsListInternalProps extends PaymentsListProps {\n  /** Flow-injected alerts (e.g. wire-transfer confirmation, payment cancellation). */\n  alerts?: InternalAlert[]\n}\n\n/**\n * Displays a list of contractor payment groups for a company.\n *\n * Supports viewing payment history, creating new payments, and filtering by date range.\n * Surfaces alerts for pending information requests and wire transfer requirements.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/payments/create` | User chooses to create a new payment | — |\n * | `contractor/payments/view` | User selects a payment group to view | `{ paymentId: string }` |\n * | `contractor/payments/rfi/respond` | User clicks to respond to an information request alert | — |\n *\n * @param props - Component props.\n * @returns The rendered payments list.\n * @public\n */\nexport function PaymentsList(props: PaymentsListProps) {\n  return <PaymentsListInternal {...props} />\n}\n\n/**\n * Flow-internal entry point for {@link PaymentsList} that accepts flow-injected\n * alerts. Partners use {@link PaymentsList}; flows render this directly.\n *\n * @internal\n */\nexport function PaymentsListInternal(props: PaymentsListInternalProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst calculateDateRange = (months: number = 3) => {\n  const endDate = new Date()\n  const startDate = new Date()\n\n  startDate.setMonth(startDate.getMonth() - months)\n  //Max range allowed by the API is 12 months\n  endDate.setMonth(endDate.getMonth() + (12 - months))\n\n  return {\n    startDate: startDate.toISOString().split('T')[0] || '',\n    endDate: endDate.toISOString().split('T')[0] || '',\n  }\n}\n\nconst Root = ({\n  companyId,\n  dictionary,\n  onEvent,\n  alerts,\n  LoaderComponent,\n}: PaymentsListInternalProps) => {\n  useComponentDictionary('Contractor.Payments.PaymentsList', dictionary)\n\n  const [numberOfMonths, setNumberOfMonths] = useState(3)\n  const { currentPage, itemsPerPage, getPaginationProps } = usePagination()\n\n  const { startDate, endDate } = useMemo(() => calculateDateRange(numberOfMonths), [numberOfMonths])\n\n  const { data, isFetching } = useContractorPaymentGroupsGetList(\n    {\n      companyId,\n      startDate,\n      endDate,\n      page: currentPage,\n      per: itemsPerPage,\n    },\n    { placeholderData: keepPreviousData, throwOnError: true },\n  )\n  const contractorPayments = data?.contractorPaymentGroupWithBlockers || []\n\n  const { data: informationRequestsData } = useInformationRequestsGetInformationRequestsSuspense({\n    companyUuid: companyId,\n  })\n  const informationRequests = informationRequestsData.informationRequests ?? []\n\n  const hasUnresolvedWireInRequests = useMemo(() => {\n    return contractorPayments.some(payment => {\n      const creditBlockers = payment.creditBlockers || []\n      return creditBlockers.some(blocker => {\n        if (blocker.status !== 'unresolved') return false\n        const wireOption = blocker.unblockOptions?.find(\n          option => option.unblockType === 'submit_wire',\n        )\n        return wireOption && 'metadata' in wireOption && wireOption.metadata.wireInRequestUuid\n      })\n    })\n  }, [contractorPayments])\n\n  const handleRespondToRfi = useCallback(() => {\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_RFI_RESPOND)\n  }, [onEvent])\n\n  const rfiAlerts = useMemo(() => {\n    const rfiAlertsArray: InternalAlert[] = []\n\n    const hasPendingResponseRfis = informationRequests.some(\n      request => request.status === InformationRequestStatus.PendingResponse,\n    )\n    const hasPendingReviewRfis = informationRequests.some(\n      request => request.status === InformationRequestStatus.PendingReview,\n    )\n\n    if (hasPendingResponseRfis) {\n      rfiAlertsArray.push({\n        type: 'error',\n        title: 'rfiPendingResponseTitle',\n        content: 'rfiPendingResponseDescription',\n        onAction: handleRespondToRfi,\n        actionLabel: 'rfiRespondCta',\n      })\n    } else if (hasPendingReviewRfis) {\n      rfiAlertsArray.push({\n        type: 'info',\n        title: 'rfiPendingReviewTitle',\n        content: 'rfiPendingReviewDescription',\n      })\n    }\n\n    return rfiAlertsArray\n  }, [informationRequests, handleRespondToRfi])\n\n  const onCreatePayment = () => {\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_CREATE)\n  }\n\n  const onCreateHistoricalPayment = () => {\n    onEvent(componentEvents.CONTRACTOR_HISTORICAL_PAYMENT_CREATE)\n  }\n\n  const handleDateRangeChange = (numberOfMonths: number) => {\n    setNumberOfMonths(numberOfMonths)\n  }\n\n  const onViewPayment = (paymentId: string) => {\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_VIEW, { paymentId })\n  }\n\n  const allAlerts = useMemo(() => {\n    return [...rfiAlerts, ...(alerts || [])]\n  }, [rfiAlerts, alerts])\n\n  if (!data) {\n    return <BaseLayout isLoading LoaderComponent={LoaderComponent} />\n  }\n\n  const paginationProps = getPaginationProps(data.httpMeta.response.headers, isFetching)\n\n  return (\n    <PaymentsListPresentation\n      contractorPayments={contractorPayments}\n      numberOfMonths={numberOfMonths}\n      onCreatePayment={onCreatePayment}\n      onCreateHistoricalPayment={onCreateHistoricalPayment}\n      onDateRangeChange={handleDateRangeChange}\n      onViewPayment={onViewPayment}\n      alerts={allAlerts}\n      companyId={companyId}\n      hasUnresolvedWireInRequests={hasUnresolvedWireInRequests}\n      onEvent={onEvent}\n      paginationProps={paginationProps}\n    />\n  )\n}\n"],"names":["PaymentsList","props","jsx","PaymentsListInternal","BaseComponent","Root","calculateDateRange","months","endDate","startDate","companyId","dictionary","onEvent","alerts","LoaderComponent","useComponentDictionary","numberOfMonths","setNumberOfMonths","useState","currentPage","itemsPerPage","getPaginationProps","usePagination","useMemo","data","isFetching","useContractorPaymentGroupsGetList","keepPreviousData","contractorPayments","informationRequestsData","useInformationRequestsGetInformationRequestsSuspense","informationRequests","hasUnresolvedWireInRequests","payment","blocker","wireOption","option","handleRespondToRfi","useCallback","componentEvents","rfiAlerts","rfiAlertsArray","hasPendingResponseRfis","request","InformationRequestStatus","hasPendingReviewRfis","onCreatePayment","onCreateHistoricalPayment","handleDateRangeChange","onViewPayment","paymentId","allAlerts","BaseLayout","paginationProps","PaymentsListPresentation"],"mappings":"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"}
+{"version":3,"file":"PaymentsList.js","sources":["../../../../../src/components/Contractor/Payments/PaymentsList/PaymentsList.tsx"],"sourcesContent":["import { useState, useMemo, useCallback } from 'react'\nimport { keepPreviousData } from '@tanstack/react-query'\nimport { useContractorPaymentGroupsGetList } from '@gusto/embedded-api/react-query/contractorPaymentGroupsGetList'\nimport { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'\nimport { InformationRequestStatus } from '@gusto/embedded-api/models/components/informationrequest'\nimport type { InternalAlert } from '../types'\nimport { PaymentsListPresentation } from './PaymentsListPresentation'\nimport { useComponentDictionary } from '@/i18n'\nimport { BaseComponent, BaseLayout, type BaseComponentInterface } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\nimport { usePagination } from '@/hooks/usePagination/usePagination'\n\n/**\n * Props for {@link PaymentsList}.\n *\n * @public\n */\nexport interface PaymentsListProps extends BaseComponentInterface<'Contractor.Payments.PaymentsList'> {\n  /** UUID of the company whose contractor payment groups should be listed. */\n  companyId: string\n}\n\n/**\n * Props for the flow-internal {@link PaymentsListInternal}, which layers\n * flow-injected alerts on top of the public {@link PaymentsListProps}.\n *\n * @internal\n */\nexport interface PaymentsListInternalProps extends PaymentsListProps {\n  /** Flow-injected alerts (e.g. wire-transfer confirmation, payment cancellation). */\n  alerts?: InternalAlert[]\n}\n\n/**\n * Displays a list of contractor payment groups for a company.\n *\n * Supports viewing payment history, creating new payments, and filtering by date range.\n * Surfaces alerts for pending information requests and wire transfer requirements.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/payments/create` | User chooses to create a new payment | — |\n * | `contractor/payments/view` | User selects a payment group to view | `{ paymentId: string }` |\n * | `contractor/payments/rfi/respond` | User clicks to respond to an information request alert | — |\n *\n * @param props - Component props.\n * @returns The rendered payments list.\n * @public\n */\nexport function PaymentsList(props: PaymentsListProps) {\n  return <PaymentsListInternal {...props} />\n}\n\n/**\n * Flow-internal entry point for {@link PaymentsList} that accepts flow-injected\n * alerts. Partners use {@link PaymentsList}; flows render this directly.\n *\n * @internal\n */\nexport function PaymentsListInternal(props: PaymentsListInternalProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst calculateDateRange = (months: number = 3) => {\n  const endDate = new Date()\n  const startDate = new Date()\n\n  startDate.setMonth(startDate.getMonth() - months)\n  //Max range allowed by the API is 12 months\n  endDate.setMonth(endDate.getMonth() + (12 - months))\n\n  return {\n    startDate: startDate.toISOString().split('T')[0] || '',\n    endDate: endDate.toISOString().split('T')[0] || '',\n  }\n}\n\nconst Root = ({\n  className,\n  companyId,\n  dictionary,\n  onEvent,\n  alerts,\n  LoaderComponent,\n}: PaymentsListInternalProps) => {\n  useComponentDictionary('Contractor.Payments.PaymentsList', dictionary)\n\n  const [numberOfMonths, setNumberOfMonths] = useState(3)\n  const { currentPage, itemsPerPage, getPaginationProps } = usePagination()\n\n  const { startDate, endDate } = useMemo(() => calculateDateRange(numberOfMonths), [numberOfMonths])\n\n  const { data, isFetching } = useContractorPaymentGroupsGetList(\n    {\n      companyId,\n      startDate,\n      endDate,\n      page: currentPage,\n      per: itemsPerPage,\n    },\n    { placeholderData: keepPreviousData, throwOnError: true },\n  )\n  const contractorPayments = data?.contractorPaymentGroupWithBlockers || []\n\n  const { data: informationRequestsData } = useInformationRequestsGetInformationRequestsSuspense({\n    companyUuid: companyId,\n  })\n  const informationRequests = informationRequestsData.informationRequests ?? []\n\n  const hasUnresolvedWireInRequests = useMemo(() => {\n    return contractorPayments.some(payment => {\n      const creditBlockers = payment.creditBlockers || []\n      return creditBlockers.some(blocker => {\n        if (blocker.status !== 'unresolved') return false\n        const wireOption = blocker.unblockOptions?.find(\n          option => option.unblockType === 'submit_wire',\n        )\n        return wireOption && 'metadata' in wireOption && wireOption.metadata.wireInRequestUuid\n      })\n    })\n  }, [contractorPayments])\n\n  const handleRespondToRfi = useCallback(() => {\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_RFI_RESPOND)\n  }, [onEvent])\n\n  const rfiAlerts = useMemo(() => {\n    const rfiAlertsArray: InternalAlert[] = []\n\n    const hasPendingResponseRfis = informationRequests.some(\n      request => request.status === InformationRequestStatus.PendingResponse,\n    )\n    const hasPendingReviewRfis = informationRequests.some(\n      request => request.status === InformationRequestStatus.PendingReview,\n    )\n\n    if (hasPendingResponseRfis) {\n      rfiAlertsArray.push({\n        type: 'error',\n        title: 'rfiPendingResponseTitle',\n        content: 'rfiPendingResponseDescription',\n        onAction: handleRespondToRfi,\n        actionLabel: 'rfiRespondCta',\n      })\n    } else if (hasPendingReviewRfis) {\n      rfiAlertsArray.push({\n        type: 'info',\n        title: 'rfiPendingReviewTitle',\n        content: 'rfiPendingReviewDescription',\n      })\n    }\n\n    return rfiAlertsArray\n  }, [informationRequests, handleRespondToRfi])\n\n  const onCreatePayment = () => {\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_CREATE)\n  }\n\n  const onCreateHistoricalPayment = () => {\n    onEvent(componentEvents.CONTRACTOR_HISTORICAL_PAYMENT_CREATE)\n  }\n\n  const handleDateRangeChange = (numberOfMonths: number) => {\n    setNumberOfMonths(numberOfMonths)\n  }\n\n  const onViewPayment = (paymentId: string) => {\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_VIEW, { paymentId })\n  }\n\n  const allAlerts = useMemo(() => {\n    return [...rfiAlerts, ...(alerts || [])]\n  }, [rfiAlerts, alerts])\n\n  if (!data) {\n    return <BaseLayout isLoading LoaderComponent={LoaderComponent} />\n  }\n\n  const paginationProps = getPaginationProps(data.httpMeta.response.headers, isFetching)\n\n  return (\n    <PaymentsListPresentation\n      className={className}\n      contractorPayments={contractorPayments}\n      numberOfMonths={numberOfMonths}\n      onCreatePayment={onCreatePayment}\n      onCreateHistoricalPayment={onCreateHistoricalPayment}\n      onDateRangeChange={handleDateRangeChange}\n      onViewPayment={onViewPayment}\n      alerts={allAlerts}\n      companyId={companyId}\n      hasUnresolvedWireInRequests={hasUnresolvedWireInRequests}\n      onEvent={onEvent}\n      paginationProps={paginationProps}\n    />\n  )\n}\n"],"names":["PaymentsList","props","jsx","PaymentsListInternal","BaseComponent","Root","calculateDateRange","months","endDate","startDate","className","companyId","dictionary","onEvent","alerts","LoaderComponent","useComponentDictionary","numberOfMonths","setNumberOfMonths","useState","currentPage","itemsPerPage","getPaginationProps","usePagination","useMemo","data","isFetching","useContractorPaymentGroupsGetList","keepPreviousData","contractorPayments","informationRequestsData","useInformationRequestsGetInformationRequestsSuspense","informationRequests","hasUnresolvedWireInRequests","payment","blocker","wireOption","option","handleRespondToRfi","useCallback","componentEvents","rfiAlerts","rfiAlertsArray","hasPendingResponseRfis","request","InformationRequestStatus","hasPendingReviewRfis","onCreatePayment","onCreateHistoricalPayment","handleDateRangeChange","onViewPayment","paymentId","allAlerts","BaseLayout","paginationProps","PaymentsListPresentation"],"mappings":"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"}

package/dist/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.js

@@ -1,43 +1,44 @@
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { useTranslation as $ } from "react-i18next";
+import { useTranslation as k } from "react-i18next";
 import o from "./PaymentsListPresentation.module.scss.js";
 import { Flex as i } from "../../../Common/Flex/Flex.js";
-import { EmptyData as k } from "../../../Common/EmptyData/EmptyData.js";
-import { ActionsLayout as S } from "../../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as R } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as T } from "../../../../i18n/I18n.js";
-import V from "../../../../hooks/useNumberFormatter.js";
-import B from "../../../../assets/icons/eye.svg.js";
+import { EmptyData as S } from "../../../Common/EmptyData/EmptyData.js";
+import { ActionsLayout as R } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { useComponentContext as T } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as V } from "../../../../i18n/I18n.js";
+import B from "../../../../hooks/useNumberFormatter.js";
+import I from "../../../../assets/icons/eye.svg.js";
 import p from "../../../../assets/icons/plus-circle.svg.js";
-import { useDateFormatter as I } from "../../../../hooks/useDateFormatter.js";
-import { ConfirmWireDetails as M } from "../../../Payroll/ConfirmWireDetails/ConfirmWireDetails.js";
-import { WithUnstableFeature as W } from "../../../../contexts/UnstableFeaturesProvider/WithUnstableFeature.js";
-import { useDataView as E } from "../../../Common/DataView/useDataView.js";
-import { DataView as H } from "../../../Common/DataView/DataView.js";
-const at = ({
+import { useDateFormatter as M } from "../../../../hooks/useDateFormatter.js";
+import { ConfirmWireDetails as W } from "../../../Payroll/ConfirmWireDetails/ConfirmWireDetails.js";
+import { WithUnstableFeature as E } from "../../../../contexts/UnstableFeaturesProvider/WithUnstableFeature.js";
+import { useDataView as H } from "../../../Common/DataView/useDataView.js";
+import { DataView as q } from "../../../Common/DataView/DataView.js";
+const rt = ({
+  className: y,
   contractorPayments: s,
-  numberOfMonths: y,
+  numberOfMonths: f,
   onCreatePayment: l,
-  onCreateHistoricalPayment: f,
-  onDateRangeChange: b,
-  onViewPayment: g,
+  onCreateHistoricalPayment: b,
+  onDateRangeChange: g,
+  onViewPayment: C,
   alerts: c = [],
-  companyId: C,
-  hasUnresolvedWireInRequests: D,
-  onEvent: P,
+  companyId: D,
+  hasUnresolvedWireInRequests: P,
+  onEvent: v,
   paginationProps: m
 }) => {
-  const { Box: v, Button: r, Heading: d, Text: u, Select: x, ButtonIcon: L, Alert: w } = R();
-  T("Contractor.Payments.PaymentsList");
-  const { t: n } = $("Contractor.Payments.PaymentsList"), h = V("currency"), { formatLongWithYear: A } = I(), F = [
+  const { Box: x, Button: r, Heading: d, Text: u, Select: L, ButtonIcon: w, Alert: A } = T();
+  V("Contractor.Payments.PaymentsList");
+  const { t: n } = k("Contractor.Payments.PaymentsList"), h = B("currency"), { formatLongWithYear: F } = M(), N = [
     { value: "3", label: n("dateRanges.last3Months") },
     { value: "6", label: n("dateRanges.last6Months") }
-  ], { ...N } = E({
+  ], { ...j } = H({
     data: s,
     columns: [
       {
         title: n("paymentDateColumnLabel"),
-        render: ({ checkDate: e }) => A(e) || "N/A"
+        render: ({ checkDate: e }) => F(e) || "N/A"
       },
       {
         title: n("wageTotalColumnLabel"),
@@ -51,17 +52,17 @@ const at = ({
       }
     ],
     itemMenu: ({ uuid: e }) => /* @__PURE__ */ t(
-      L,
+      w,
       {
         "aria-label": n("viewPaymentCta"),
         variant: "tertiary",
         onClick: () => {
-          g(e || "");
+          C(e || "");
         },
-        children: /* @__PURE__ */ t(B, { "aria-hidden": !0 })
+        children: /* @__PURE__ */ t(I, { "aria-hidden": !0 })
       }
     ),
-    emptyState: () => /* @__PURE__ */ t(k, { title: n("noPaymentsFound"), description: n("noPaymentsDescription"), children: /* @__PURE__ */ t(S, { justifyContent: "center", children: /* @__PURE__ */ t(
+    emptyState: () => /* @__PURE__ */ t(S, { title: n("noPaymentsFound"), description: n("noPaymentsDescription"), children: /* @__PURE__ */ t(R, { justifyContent: "center", children: /* @__PURE__ */ t(
       r,
       {
         variant: "secondary",
@@ -73,11 +74,11 @@ const at = ({
     pagination: m,
     isFetching: m?.isFetching
   });
-  return /* @__PURE__ */ a(i, { flexDirection: "column", gap: 24, children: [
+  return /* @__PURE__ */ a(i, { className: y, flexDirection: "column", gap: 24, children: [
     /* @__PURE__ */ t(i, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ t(d, { as: "h1", styledAs: "h2", children: n("title") }) }),
-    D && /* @__PURE__ */ t(M, { companyId: C, onEvent: P }),
-    c.length > 0 && /* @__PURE__ */ t(i, { flexDirection: "column", gap: 16, children: c.map((e, j) => /* @__PURE__ */ t(
-      w,
+    P && /* @__PURE__ */ t(W, { companyId: D, onEvent: v }),
+    c.length > 0 && /* @__PURE__ */ t(i, { flexDirection: "column", gap: 16, children: c.map((e, $) => /* @__PURE__ */ t(
+      A,
       {
         label: n(`alerts.${e.title}`, e.translationParams),
         status: e.type,
@@ -87,7 +88,7 @@ const at = ({
           e.onAction && e.actionLabel && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(r, { variant: "secondary", onClick: e.onAction, children: n(`alerts.${e.actionLabel}`) }) })
         ] })
       },
-      `${e.type}-${e.title}-${j}`
+      `${e.type}-${e.title}-${$}`
     )) }),
     /* @__PURE__ */ a(
       i,
@@ -106,14 +107,14 @@ const at = ({
           /* @__PURE__ */ t(d, { as: "h2", styledAs: "h4", children: n("subtitle") }),
           /* @__PURE__ */ a("div", { className: o.actionsContainer, children: [
             /* @__PURE__ */ t(
-              x,
+              L,
               {
                 id: "date-range-select",
-                value: y.toString(),
+                value: f.toString(),
                 onChange: (e) => {
-                  b(Number(e));
+                  g(Number(e));
                 },
-                options: F,
+                options: N,
                 isRequired: !0,
                 label: n("startDate"),
                 placeholder: "",
@@ -134,20 +135,20 @@ const at = ({
         ]
       }
     ),
-    /* @__PURE__ */ t(H, { label: n("subtitle"), ...N }),
-    /* @__PURE__ */ t(W, { feature: "historicalPayments", children: /* @__PURE__ */ t("div", { className: o.historicalPaymentCta, children: /* @__PURE__ */ t(
-      v,
+    /* @__PURE__ */ t(q, { label: n("subtitle"), ...j }),
+    /* @__PURE__ */ t(E, { feature: "historicalPayments", children: /* @__PURE__ */ t("div", { className: o.historicalPaymentCta, children: /* @__PURE__ */ t(
+      x,
       {
         header: /* @__PURE__ */ a(i, { flexDirection: "column", gap: 4, children: [
           /* @__PURE__ */ t(u, { weight: "semibold", children: n("historicalPaymentCta.title") }),
           /* @__PURE__ */ t(u, { variant: "supporting", children: n("historicalPaymentCta.description") })
         ] }),
-        footer: /* @__PURE__ */ t(r, { variant: "secondary", onClick: f, children: n("historicalPaymentCta.button") })
+        footer: /* @__PURE__ */ t(r, { variant: "secondary", onClick: b, children: n("historicalPaymentCta.button") })
       }
     ) }) })
   ] });
 };
 export {
-  at as PaymentsListPresentation
+  rt as PaymentsListPresentation
 };
 //# sourceMappingURL=PaymentsListPresentation.js.map

package/dist/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentsListPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupWithBlockers } from '@gusto/embedded-api/models/components/contractorpaymentgroupwithblockers'\nimport type { InternalAlert } from '../types'\nimport styles from './PaymentsListPresentation.module.scss'\nimport { DataView, Flex, EmptyData, ActionsLayout, useDataView } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport EyeIcon from '@/assets/icons/eye.svg?react'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { ConfirmWireDetails } from '@/components/Payroll/ConfirmWireDetails'\nimport type { EventType } from '@/shared/constants'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\nimport { WithUnstableFeature } from '@/contexts/UnstableFeaturesProvider/WithUnstableFeature'\n\ninterface ContractorPaymentPaymentsListPresentationProps {\n  numberOfMonths: number\n  contractorPayments: ContractorPaymentGroupWithBlockers[]\n  onCreatePayment: () => void\n  onCreateHistoricalPayment: () => void\n  onDateRangeChange: (numberOfMonths: number) => void\n  onViewPayment: (paymentId: string) => void\n  alerts?: InternalAlert[]\n  companyId: string\n  hasUnresolvedWireInRequests: boolean\n  onEvent: (type: EventType, data?: unknown) => void\n  paginationProps?: PaginationControlProps\n}\n\n/** @internal */\nexport const PaymentsListPresentation = ({\n  contractorPayments,\n  numberOfMonths,\n  onCreatePayment,\n  onCreateHistoricalPayment,\n  onDateRangeChange,\n  onViewPayment,\n  alerts = [],\n  companyId,\n  hasUnresolvedWireInRequests,\n  onEvent,\n  paginationProps,\n}: ContractorPaymentPaymentsListPresentationProps) => {\n  const { Box, Button, Heading, Text, Select, ButtonIcon, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentsList')\n  const { t } = useTranslation('Contractor.Payments.PaymentsList')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const dateRangeOptions = [\n    { value: '3', label: t('dateRanges.last3Months') },\n    { value: '6', label: t('dateRanges.last6Months') },\n  ]\n  const { ...dataViewProps } = useDataView({\n    data: contractorPayments,\n    columns: [\n      {\n        title: t('paymentDateColumnLabel'),\n        render: ({ checkDate }) => formatLongWithYear(checkDate) || 'N/A',\n      },\n      {\n        title: t('wageTotalColumnLabel'),\n        justify: 'end',\n        render: ({ totals }) => currencyFormatter(Number(totals?.wageAmount || 0)),\n      },\n      {\n        title: t('reimbursementTotalColumnLabel'),\n        justify: 'end',\n        render: ({ totals }) => currencyFormatter(Number(totals?.reimbursementAmount) || 0),\n      },\n    ],\n    itemMenu: ({ uuid }) => (\n      <ButtonIcon\n        aria-label={t('viewPaymentCta')}\n        variant=\"tertiary\"\n        onClick={() => {\n          onViewPayment(uuid || '')\n        }}\n      >\n        <EyeIcon aria-hidden />\n      </ButtonIcon>\n    ),\n    emptyState: () => (\n      <EmptyData title={t('noPaymentsFound')} description={t('noPaymentsDescription')}>\n        <ActionsLayout justifyContent=\"center\">\n          <Button\n            variant=\"secondary\"\n            icon={<PlusCircleIcon aria-hidden />}\n            onClick={onCreatePayment}\n          >\n            {t('createPaymentCta')}\n          </Button>\n        </ActionsLayout>\n      </EmptyData>\n    ),\n    pagination: paginationProps,\n    isFetching: paginationProps?.isFetching,\n  })\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h1\" styledAs=\"h2\">\n          {t('title')}\n        </Heading>\n      </Flex>\n\n      {hasUnresolvedWireInRequests && (\n        <ConfirmWireDetails companyId={companyId} onEvent={onEvent} />\n      )}\n\n      {alerts.length > 0 && (\n        <Flex flexDirection=\"column\" gap={16}>\n          {alerts.map((alert, index) => (\n            <Alert\n              key={`${alert.type}-${alert.title}-${index}`}\n              label={t(`alerts.${alert.title}` as never, alert.translationParams)}\n              status={alert.type}\n              onDismiss={alert.onDismiss}\n            >\n              <Flex flexDirection=\"column\" gap={12}>\n                {typeof alert.content === 'string'\n                  ? t(`alerts.${alert.content}` as never)\n                  : (alert.content ?? null)}\n                {alert.onAction && alert.actionLabel && (\n                  <div>\n                    <Button variant=\"secondary\" onClick={alert.onAction}>\n                      {t(`alerts.${alert.actionLabel}` as never)}\n                    </Button>\n                  </div>\n                )}\n              </Flex>\n            </Alert>\n          ))}\n        </Flex>\n      )}\n\n      <Flex\n        flexDirection={{\n          base: 'column',\n          small: 'row',\n        }}\n        gap={16}\n        alignItems={{\n          base: 'stretch',\n          small: 'center',\n        }}\n        justifyContent=\"space-between\"\n      >\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('subtitle')}\n        </Heading>\n        <div className={styles.actionsContainer}>\n          <Select\n            id=\"date-range-select\"\n            value={numberOfMonths.toString()}\n            onChange={value => {\n              onDateRangeChange(Number(value))\n            }}\n            options={dateRangeOptions}\n            isRequired\n            label={t('startDate')}\n            placeholder=\"\"\n            shouldVisuallyHideLabel\n          />\n          {contractorPayments.length > 0 && (\n            <Button\n              onClick={onCreatePayment}\n              variant=\"secondary\"\n              icon={<PlusCircleIcon aria-hidden />}\n              className={styles.nowrap}\n            >\n              {t('createPaymentCta')}\n            </Button>\n          )}\n        </div>\n      </Flex>\n\n      <DataView label={t('subtitle')} {...dataViewProps} />\n\n      <WithUnstableFeature feature=\"historicalPayments\">\n        <div className={styles.historicalPaymentCta}>\n          <Box\n            header={\n              <Flex flexDirection=\"column\" gap={4}>\n                <Text weight=\"semibold\">{t('historicalPaymentCta.title')}</Text>\n                <Text variant=\"supporting\">{t('historicalPaymentCta.description')}</Text>\n              </Flex>\n            }\n            footer={\n              <Button variant=\"secondary\" onClick={onCreateHistoricalPayment}>\n                {t('historicalPaymentCta.button')}\n              </Button>\n            }\n          />\n        </div>\n      </WithUnstableFeature>\n    </Flex>\n  )\n}\n"],"names":["PaymentsListPresentation","contractorPayments","numberOfMonths","onCreatePayment","onCreateHistoricalPayment","onDateRangeChange","onViewPayment","alerts","companyId","hasUnresolvedWireInRequests","onEvent","paginationProps","Box","Button","Heading","Text","Select","ButtonIcon","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","dateRangeOptions","dataViewProps","useDataView","checkDate","totals","uuid","jsx","EyeIcon","EmptyData","ActionsLayout","PlusCircleIcon","jsxs","Flex","ConfirmWireDetails","alert","index","styles","value","DataView","WithUnstableFeature"],"mappings":"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"}
+{"version":3,"file":"PaymentsListPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupWithBlockers } from '@gusto/embedded-api/models/components/contractorpaymentgroupwithblockers'\nimport type { InternalAlert } from '../types'\nimport styles from './PaymentsListPresentation.module.scss'\nimport { DataView, Flex, EmptyData, ActionsLayout, useDataView } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport EyeIcon from '@/assets/icons/eye.svg?react'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { ConfirmWireDetails } from '@/components/Payroll/ConfirmWireDetails'\nimport type { EventType } from '@/shared/constants'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\nimport { WithUnstableFeature } from '@/contexts/UnstableFeaturesProvider/WithUnstableFeature'\n\ninterface ContractorPaymentPaymentsListPresentationProps {\n  /** CSS class name applied to the root element. */\n  className?: string\n  numberOfMonths: number\n  contractorPayments: ContractorPaymentGroupWithBlockers[]\n  onCreatePayment: () => void\n  onCreateHistoricalPayment: () => void\n  onDateRangeChange: (numberOfMonths: number) => void\n  onViewPayment: (paymentId: string) => void\n  alerts?: InternalAlert[]\n  companyId: string\n  hasUnresolvedWireInRequests: boolean\n  onEvent: (type: EventType, data?: unknown) => void\n  paginationProps?: PaginationControlProps\n}\n\n/** @internal */\nexport const PaymentsListPresentation = ({\n  className,\n  contractorPayments,\n  numberOfMonths,\n  onCreatePayment,\n  onCreateHistoricalPayment,\n  onDateRangeChange,\n  onViewPayment,\n  alerts = [],\n  companyId,\n  hasUnresolvedWireInRequests,\n  onEvent,\n  paginationProps,\n}: ContractorPaymentPaymentsListPresentationProps) => {\n  const { Box, Button, Heading, Text, Select, ButtonIcon, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentsList')\n  const { t } = useTranslation('Contractor.Payments.PaymentsList')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const dateRangeOptions = [\n    { value: '3', label: t('dateRanges.last3Months') },\n    { value: '6', label: t('dateRanges.last6Months') },\n  ]\n  const { ...dataViewProps } = useDataView({\n    data: contractorPayments,\n    columns: [\n      {\n        title: t('paymentDateColumnLabel'),\n        render: ({ checkDate }) => formatLongWithYear(checkDate) || 'N/A',\n      },\n      {\n        title: t('wageTotalColumnLabel'),\n        justify: 'end',\n        render: ({ totals }) => currencyFormatter(Number(totals?.wageAmount || 0)),\n      },\n      {\n        title: t('reimbursementTotalColumnLabel'),\n        justify: 'end',\n        render: ({ totals }) => currencyFormatter(Number(totals?.reimbursementAmount) || 0),\n      },\n    ],\n    itemMenu: ({ uuid }) => (\n      <ButtonIcon\n        aria-label={t('viewPaymentCta')}\n        variant=\"tertiary\"\n        onClick={() => {\n          onViewPayment(uuid || '')\n        }}\n      >\n        <EyeIcon aria-hidden />\n      </ButtonIcon>\n    ),\n    emptyState: () => (\n      <EmptyData title={t('noPaymentsFound')} description={t('noPaymentsDescription')}>\n        <ActionsLayout justifyContent=\"center\">\n          <Button\n            variant=\"secondary\"\n            icon={<PlusCircleIcon aria-hidden />}\n            onClick={onCreatePayment}\n          >\n            {t('createPaymentCta')}\n          </Button>\n        </ActionsLayout>\n      </EmptyData>\n    ),\n    pagination: paginationProps,\n    isFetching: paginationProps?.isFetching,\n  })\n\n  return (\n    <Flex className={className} flexDirection=\"column\" gap={24}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h1\" styledAs=\"h2\">\n          {t('title')}\n        </Heading>\n      </Flex>\n\n      {hasUnresolvedWireInRequests && (\n        <ConfirmWireDetails companyId={companyId} onEvent={onEvent} />\n      )}\n\n      {alerts.length > 0 && (\n        <Flex flexDirection=\"column\" gap={16}>\n          {alerts.map((alert, index) => (\n            <Alert\n              key={`${alert.type}-${alert.title}-${index}`}\n              label={t(`alerts.${alert.title}` as never, alert.translationParams)}\n              status={alert.type}\n              onDismiss={alert.onDismiss}\n            >\n              <Flex flexDirection=\"column\" gap={12}>\n                {typeof alert.content === 'string'\n                  ? t(`alerts.${alert.content}` as never)\n                  : (alert.content ?? null)}\n                {alert.onAction && alert.actionLabel && (\n                  <div>\n                    <Button variant=\"secondary\" onClick={alert.onAction}>\n                      {t(`alerts.${alert.actionLabel}` as never)}\n                    </Button>\n                  </div>\n                )}\n              </Flex>\n            </Alert>\n          ))}\n        </Flex>\n      )}\n\n      <Flex\n        flexDirection={{\n          base: 'column',\n          small: 'row',\n        }}\n        gap={16}\n        alignItems={{\n          base: 'stretch',\n          small: 'center',\n        }}\n        justifyContent=\"space-between\"\n      >\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('subtitle')}\n        </Heading>\n        <div className={styles.actionsContainer}>\n          <Select\n            id=\"date-range-select\"\n            value={numberOfMonths.toString()}\n            onChange={value => {\n              onDateRangeChange(Number(value))\n            }}\n            options={dateRangeOptions}\n            isRequired\n            label={t('startDate')}\n            placeholder=\"\"\n            shouldVisuallyHideLabel\n          />\n          {contractorPayments.length > 0 && (\n            <Button\n              onClick={onCreatePayment}\n              variant=\"secondary\"\n              icon={<PlusCircleIcon aria-hidden />}\n              className={styles.nowrap}\n            >\n              {t('createPaymentCta')}\n            </Button>\n          )}\n        </div>\n      </Flex>\n\n      <DataView label={t('subtitle')} {...dataViewProps} />\n\n      <WithUnstableFeature feature=\"historicalPayments\">\n        <div className={styles.historicalPaymentCta}>\n          <Box\n            header={\n              <Flex flexDirection=\"column\" gap={4}>\n                <Text weight=\"semibold\">{t('historicalPaymentCta.title')}</Text>\n                <Text variant=\"supporting\">{t('historicalPaymentCta.description')}</Text>\n              </Flex>\n            }\n            footer={\n              <Button variant=\"secondary\" onClick={onCreateHistoricalPayment}>\n                {t('historicalPaymentCta.button')}\n              </Button>\n            }\n          />\n        </div>\n      </WithUnstableFeature>\n    </Flex>\n  )\n}\n"],"names":["PaymentsListPresentation","className","contractorPayments","numberOfMonths","onCreatePayment","onCreateHistoricalPayment","onDateRangeChange","onViewPayment","alerts","companyId","hasUnresolvedWireInRequests","onEvent","paginationProps","Box","Button","Heading","Text","Select","ButtonIcon","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","dateRangeOptions","dataViewProps","useDataView","checkDate","totals","uuid","jsx","EyeIcon","EmptyData","ActionsLayout","PlusCircleIcon","Flex","ConfirmWireDetails","alert","index","jsxs","styles","value","DataView","WithUnstableFeature"],"mappings":"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"}

package/dist/components/Contractor/Profile/management/ProfileCard/ProfileCard.js

@@ -1,4 +1,4 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { useTranslation as N } from "react-i18next";
 import { Loading as h } from "../../../../Common/Loading/Loading.js";
 import { BaseBoundaries as g, BaseLayout as P } from "../../../../Base/Base.js";
@@ -9,43 +9,47 @@ import { useI18n as y } from "../../../../../i18n/I18n.js";
 import { CONTRACTOR_TYPE as B, componentEvents as D } from "../../../../../shared/constants.js";
 import { useContractorProfileSummary as L } from "../../shared/useContractorProfileSummary/useContractorProfileSummary.js";
 function U({ LoaderComponent: r, ...s }) {
-  return /* @__PURE__ */ o(g, { componentName: "Contractor.Management.Profile", LoaderComponent: r, children: /* @__PURE__ */ o(S, { LoaderComponent: r, ...s }) });
+  return /* @__PURE__ */ e(g, { componentName: "Contractor.Management.Profile", LoaderComponent: r, children: /* @__PURE__ */ e(S, { LoaderComponent: r, ...s }) });
 }
 function S({ contractorId: r, onEvent: s, LoaderComponent: l }) {
   y("Contractor.Management.Profile");
-  const { t: e } = N("Contractor.Management.Profile"), n = T(), a = L({ contractorId: r }), m = a.isLoading, t = a.isLoading ? void 0 : a.data.contractor, c = t?.type === B.BUSINESS, d = t ? c ? t.businessName : v({ first_name: t.firstName, last_name: t.lastName }) : void 0, p = t ? X(t.startDate) : void 0, f = t?.hasSsn ? "XXX-XX-XXXX" : void 0, u = t?.hasEin ? t.ein ?? void 0 : void 0, i = /* @__PURE__ */ o("span", { "aria-label": e("listEmptyPlaceholder"), children: "–" }), C = t ? [
-    { term: e("legalName"), description: d || i },
-    { term: e("startDate"), description: p || i },
+  const { t: o } = N("Contractor.Management.Profile"), n = T(), a = L({ contractorId: r }), m = a.isLoading, t = a.isLoading ? void 0 : a.data.contractor, c = t?.type === B.BUSINESS, d = t ? c ? t.businessName : v({
+    first_name: t.firstName,
+    middle_initial: t.middleInitial,
+    last_name: t.lastName
+  }) : void 0, p = t ? X(t.startDate) : void 0, f = t?.hasSsn ? "XXX-XX-XXXX" : void 0, u = t?.hasEin ? t.ein ?? void 0 : void 0, i = /* @__PURE__ */ e("span", { "aria-label": o("listEmptyPlaceholder"), children: "–" }), C = t ? [
+    { term: o("legalName"), description: d || i },
+    { term: o("startDate"), description: p || i },
     c ? {
-      term: e("employerIdentificationNumber"),
+      term: o("employerIdentificationNumber"),
       description: u || i
     } : {
-      term: e("socialSecurityNumber"),
+      term: o("socialSecurityNumber"),
       description: f || i
     },
-    { term: e("email"), description: t.email || i }
+    { term: o("email"), description: t.email || i }
   ] : [], E = () => {
     s(D.CONTRACTOR_MANAGEMENT_PROFILE_EDIT_REQUESTED, { contractorId: r });
   };
-  return /* @__PURE__ */ o(P, { error: a.errorHandling.errors, LoaderComponent: l, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ e(P, { error: a.errorHandling.errors, LoaderComponent: l, children: /* @__PURE__ */ e(
     n.Box,
     {
-      header: /* @__PURE__ */ o(
+      header: /* @__PURE__ */ e(
         n.BoxHeader,
         {
-          title: e("title"),
-          action: /* @__PURE__ */ o(
+          title: o("title"),
+          action: /* @__PURE__ */ e(
             n.Button,
             {
               variant: "secondary",
               onClick: E,
               isDisabled: m,
-              children: e("editCta")
+              children: o("editCta")
             }
           )
         }
       ),
-      children: m ? /* @__PURE__ */ o(h, {}) : t ? /* @__PURE__ */ o(n.DescriptionList, { items: C }) : null
+      children: m ? /* @__PURE__ */ e(h, {}) : t ? /* @__PURE__ */ e(n.DescriptionList, { items: C }) : null
     }
   ) });
 }

package/dist/components/Contractor/Profile/management/ProfileCard/ProfileCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileCard.js","sources":["../../../../../../src/components/Contractor/Profile/management/ProfileCard/ProfileCard.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useContractorProfileSummary } from '../../shared/useContractorProfileSummary'\nimport { Loading } from '@/components/Common'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { formatDateLongWithYear } from '@/helpers/dateFormatting'\nimport { firstLastName } from '@/helpers/formattedStrings'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, CONTRACTOR_TYPE, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\n\n/**\n * Props for {@link ProfileCard}.\n *\n * @public\n */\nexport interface ProfileCardProps {\n  /** The associated contractor identifier. */\n  contractorId: string\n  /** Event handler fired when the user requests to edit the profile. */\n  onEvent: OnEventType<EventType, unknown>\n  /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Read-only card showing a contractor's basic profile details with an Edit action.\n *\n * @remarks\n * Standalone card that fetches its own data. Emits an event when the user\n * clicks Edit so the parent can switch to the edit form. The card does not\n * render success or error alerts itself — alert presentation is the\n * surrounding surface's responsibility.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/management/profile/editRequested` | Fired when the user clicks the Edit button | `{ contractorId: string }` |\n *\n * @param props - See {@link ProfileCardProps}.\n * @returns The basic-details profile card.\n * @public\n */\nexport function ProfileCard({ LoaderComponent, ...props }: ProfileCardProps) {\n  return (\n    <BaseBoundaries componentName=\"Contractor.Management.Profile\" LoaderComponent={LoaderComponent}>\n      <ProfileCardContent LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction ProfileCardContent({ contractorId, onEvent, LoaderComponent }: ProfileCardProps) {\n  useI18n('Contractor.Management.Profile')\n  const { t } = useTranslation('Contractor.Management.Profile')\n  const Components = useComponentContext()\n\n  const profile = useContractorProfileSummary({ contractorId })\n\n  const isContractorLoading = profile.isLoading\n\n  const contractor = profile.isLoading ? undefined : profile.data.contractor\n\n  const isBusiness = contractor?.type === CONTRACTOR_TYPE.BUSINESS\n\n  const legalName = contractor\n    ? isBusiness\n      ? contractor.businessName\n      : firstLastName({ first_name: contractor.firstName, last_name: contractor.lastName })\n    : undefined\n  const startDate = contractor ? formatDateLongWithYear(contractor.startDate) : undefined\n  const maskedSsn = contractor?.hasSsn ? 'XXX-XX-XXXX' : undefined\n  const maskedEin = contractor?.hasEin ? (contractor.ein ?? undefined) : undefined\n\n  const emptyPlaceholder = <span aria-label={t('listEmptyPlaceholder')}>–</span>\n  const profileItems = contractor\n    ? [\n        { term: t('legalName'), description: legalName || emptyPlaceholder },\n        { term: t('startDate'), description: startDate || emptyPlaceholder },\n        isBusiness\n          ? {\n              term: t('employerIdentificationNumber'),\n              description: maskedEin || emptyPlaceholder,\n            }\n          : {\n              term: t('socialSecurityNumber'),\n              description: maskedSsn || emptyPlaceholder,\n            },\n        { term: t('email'), description: contractor.email || emptyPlaceholder },\n      ]\n    : []\n\n  const handleEdit = () => {\n    onEvent(componentEvents.CONTRACTOR_MANAGEMENT_PROFILE_EDIT_REQUESTED, { contractorId })\n  }\n\n  return (\n    <BaseLayout error={profile.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <Components.Box\n        header={\n          <Components.BoxHeader\n            title={t('title')}\n            action={\n              <Components.Button\n                variant=\"secondary\"\n                onClick={handleEdit}\n                isDisabled={isContractorLoading}\n              >\n                {t('editCta')}\n              </Components.Button>\n            }\n          />\n        }\n      >\n        {isContractorLoading ? (\n          <Loading />\n        ) : contractor ? (\n          <Components.DescriptionList items={profileItems} />\n        ) : null}\n      </Components.Box>\n    </BaseLayout>\n  )\n}\n"],"names":["ProfileCard","LoaderComponent","props","jsx","BaseBoundaries","ProfileCardContent","contractorId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","profile","useContractorProfileSummary","isContractorLoading","contractor","isBusiness","CONTRACTOR_TYPE","legalName","firstLastName","startDate","formatDateLongWithYear","maskedSsn","maskedEin","emptyPlaceholder","profileItems","handleEdit","componentEvents","BaseLayout","Loading"],"mappings":";;;;;;;;;;AA4CO,SAASA,EAAY,EAAE,iBAAAC,GAAiB,GAAGC,KAA2B;AAC3E,SACE,gBAAAC,EAACC,GAAA,EAAe,eAAc,iCAAgC,iBAAAH,GAC5D,4BAACI,GAAA,EAAmB,iBAAAJ,GAAmC,GAAGC,EAAA,CAAO,EAAA,CACnE;AAEJ;AAEA,SAASG,EAAmB,EAAE,cAAAC,GAAc,SAAAC,GAAS,iBAAAN,KAAqC;AACxF,EAAAO,EAAQ,+BAA+B;AACvC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,+BAA+B,GACtDC,IAAaC,EAAA,GAEbC,IAAUC,EAA4B,EAAE,cAAAR,GAAc,GAEtDS,IAAsBF,EAAQ,WAE9BG,IAAaH,EAAQ,YAAY,SAAYA,EAAQ,KAAK,YAE1DI,IAAaD,GAAY,SAASE,EAAgB,UAElDC,IAAYH,IACdC,IACED,EAAW,eACXI,EAAc,EAAE,YAAYJ,EAAW,WAAW,WAAWA,EAAW,SAAA,CAAU,IACpF,QACEK,IAAYL,IAAaM,EAAuBN,EAAW,SAAS,IAAI,QACxEO,IAAYP,GAAY,SAAS,gBAAgB,QACjDQ,IAAYR,GAAY,SAAUA,EAAW,OAAO,SAAa,QAEjES,IAAmB,gBAAAtB,EAAC,QAAA,EAAK,cAAYM,EAAE,sBAAsB,GAAG,UAAA,KAAC,GACjEiB,IAAeV,IACjB;AAAA,IACE,EAAE,MAAMP,EAAE,WAAW,GAAG,aAAaU,KAAaM,EAAA;AAAA,IAClD,EAAE,MAAMhB,EAAE,WAAW,GAAG,aAAaY,KAAaI,EAAA;AAAA,IAClDR,IACI;AAAA,MACE,MAAMR,EAAE,8BAA8B;AAAA,MACtC,aAAae,KAAaC;AAAA,IAAA,IAE5B;AAAA,MACE,MAAMhB,EAAE,sBAAsB;AAAA,MAC9B,aAAac,KAAaE;AAAA,IAAA;AAAA,IAEhC,EAAE,MAAMhB,EAAE,OAAO,GAAG,aAAaO,EAAW,SAASS,EAAA;AAAA,EAAiB,IAExE,CAAA,GAEEE,IAAa,MAAM;AACvB,IAAApB,EAAQqB,EAAgB,8CAA8C,EAAE,cAAAtB,EAAA,CAAc;AAAA,EACxF;AAEA,2BACGuB,GAAA,EAAW,OAAOhB,EAAQ,cAAc,QAAQ,iBAAAZ,GAC/C,UAAA,gBAAAE;AAAA,IAACQ,EAAW;AAAA,IAAX;AAAA,MACC,QACE,gBAAAR;AAAA,QAACQ,EAAW;AAAA,QAAX;AAAA,UACC,OAAOF,EAAE,OAAO;AAAA,UAChB,QACE,gBAAAN;AAAA,YAACQ,EAAW;AAAA,YAAX;AAAA,cACC,SAAQ;AAAA,cACR,SAASgB;AAAA,cACT,YAAYZ;AAAA,cAEX,YAAE,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,MAKL,UAAAA,IACC,gBAAAZ,EAAC2B,GAAA,CAAA,CAAQ,IACPd,IACF,gBAAAb,EAACQ,EAAW,iBAAX,EAA2B,OAAOe,EAAA,CAAc,IAC/C;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}
+{"version":3,"file":"ProfileCard.js","sources":["../../../../../../src/components/Contractor/Profile/management/ProfileCard/ProfileCard.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useContractorProfileSummary } from '../../shared/useContractorProfileSummary'\nimport { Loading } from '@/components/Common'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { formatDateLongWithYear } from '@/helpers/dateFormatting'\nimport { firstLastName } from '@/helpers/formattedStrings'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, CONTRACTOR_TYPE, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\n\n/**\n * Props for {@link ProfileCard}.\n *\n * @public\n */\nexport interface ProfileCardProps {\n  /** The associated contractor identifier. */\n  contractorId: string\n  /** Event handler fired when the user requests to edit the profile. */\n  onEvent: OnEventType<EventType, unknown>\n  /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Read-only card showing a contractor's basic profile details with an Edit action.\n *\n * @remarks\n * Standalone card that fetches its own data. Emits an event when the user\n * clicks Edit so the parent can switch to the edit form. The card does not\n * render success or error alerts itself — alert presentation is the\n * surrounding surface's responsibility.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/management/profile/editRequested` | Fired when the user clicks the Edit button | `{ contractorId: string }` |\n *\n * @param props - See {@link ProfileCardProps}.\n * @returns The basic-details profile card.\n * @public\n */\nexport function ProfileCard({ LoaderComponent, ...props }: ProfileCardProps) {\n  return (\n    <BaseBoundaries componentName=\"Contractor.Management.Profile\" LoaderComponent={LoaderComponent}>\n      <ProfileCardContent LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction ProfileCardContent({ contractorId, onEvent, LoaderComponent }: ProfileCardProps) {\n  useI18n('Contractor.Management.Profile')\n  const { t } = useTranslation('Contractor.Management.Profile')\n  const Components = useComponentContext()\n\n  const profile = useContractorProfileSummary({ contractorId })\n\n  const isContractorLoading = profile.isLoading\n\n  const contractor = profile.isLoading ? undefined : profile.data.contractor\n\n  const isBusiness = contractor?.type === CONTRACTOR_TYPE.BUSINESS\n\n  const legalName = contractor\n    ? isBusiness\n      ? contractor.businessName\n      : firstLastName({\n          first_name: contractor.firstName,\n          middle_initial: contractor.middleInitial,\n          last_name: contractor.lastName,\n        })\n    : undefined\n  const startDate = contractor ? formatDateLongWithYear(contractor.startDate) : undefined\n  const maskedSsn = contractor?.hasSsn ? 'XXX-XX-XXXX' : undefined\n  const maskedEin = contractor?.hasEin ? (contractor.ein ?? undefined) : undefined\n\n  const emptyPlaceholder = <span aria-label={t('listEmptyPlaceholder')}>–</span>\n  const profileItems = contractor\n    ? [\n        { term: t('legalName'), description: legalName || emptyPlaceholder },\n        { term: t('startDate'), description: startDate || emptyPlaceholder },\n        isBusiness\n          ? {\n              term: t('employerIdentificationNumber'),\n              description: maskedEin || emptyPlaceholder,\n            }\n          : {\n              term: t('socialSecurityNumber'),\n              description: maskedSsn || emptyPlaceholder,\n            },\n        { term: t('email'), description: contractor.email || emptyPlaceholder },\n      ]\n    : []\n\n  const handleEdit = () => {\n    onEvent(componentEvents.CONTRACTOR_MANAGEMENT_PROFILE_EDIT_REQUESTED, { contractorId })\n  }\n\n  return (\n    <BaseLayout error={profile.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <Components.Box\n        header={\n          <Components.BoxHeader\n            title={t('title')}\n            action={\n              <Components.Button\n                variant=\"secondary\"\n                onClick={handleEdit}\n                isDisabled={isContractorLoading}\n              >\n                {t('editCta')}\n              </Components.Button>\n            }\n          />\n        }\n      >\n        {isContractorLoading ? (\n          <Loading />\n        ) : contractor ? (\n          <Components.DescriptionList items={profileItems} />\n        ) : null}\n      </Components.Box>\n    </BaseLayout>\n  )\n}\n"],"names":["ProfileCard","LoaderComponent","props","jsx","BaseBoundaries","ProfileCardContent","contractorId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","profile","useContractorProfileSummary","isContractorLoading","contractor","isBusiness","CONTRACTOR_TYPE","legalName","firstLastName","startDate","formatDateLongWithYear","maskedSsn","maskedEin","emptyPlaceholder","profileItems","handleEdit","componentEvents","BaseLayout","Loading"],"mappings":";;;;;;;;;;AA4CO,SAASA,EAAY,EAAE,iBAAAC,GAAiB,GAAGC,KAA2B;AAC3E,SACE,gBAAAC,EAACC,GAAA,EAAe,eAAc,iCAAgC,iBAAAH,GAC5D,4BAACI,GAAA,EAAmB,iBAAAJ,GAAmC,GAAGC,EAAA,CAAO,EAAA,CACnE;AAEJ;AAEA,SAASG,EAAmB,EAAE,cAAAC,GAAc,SAAAC,GAAS,iBAAAN,KAAqC;AACxF,EAAAO,EAAQ,+BAA+B;AACvC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,+BAA+B,GACtDC,IAAaC,EAAA,GAEbC,IAAUC,EAA4B,EAAE,cAAAR,GAAc,GAEtDS,IAAsBF,EAAQ,WAE9BG,IAAaH,EAAQ,YAAY,SAAYA,EAAQ,KAAK,YAE1DI,IAAaD,GAAY,SAASE,EAAgB,UAElDC,IAAYH,IACdC,IACED,EAAW,eACXI,EAAc;AAAA,IACZ,YAAYJ,EAAW;AAAA,IACvB,gBAAgBA,EAAW;AAAA,IAC3B,WAAWA,EAAW;AAAA,EAAA,CACvB,IACH,QACEK,IAAYL,IAAaM,EAAuBN,EAAW,SAAS,IAAI,QACxEO,IAAYP,GAAY,SAAS,gBAAgB,QACjDQ,IAAYR,GAAY,SAAUA,EAAW,OAAO,SAAa,QAEjES,IAAmB,gBAAAtB,EAAC,QAAA,EAAK,cAAYM,EAAE,sBAAsB,GAAG,UAAA,KAAC,GACjEiB,IAAeV,IACjB;AAAA,IACE,EAAE,MAAMP,EAAE,WAAW,GAAG,aAAaU,KAAaM,EAAA;AAAA,IAClD,EAAE,MAAMhB,EAAE,WAAW,GAAG,aAAaY,KAAaI,EAAA;AAAA,IAClDR,IACI;AAAA,MACE,MAAMR,EAAE,8BAA8B;AAAA,MACtC,aAAae,KAAaC;AAAA,IAAA,IAE5B;AAAA,MACE,MAAMhB,EAAE,sBAAsB;AAAA,MAC9B,aAAac,KAAaE;AAAA,IAAA;AAAA,IAEhC,EAAE,MAAMhB,EAAE,OAAO,GAAG,aAAaO,EAAW,SAASS,EAAA;AAAA,EAAiB,IAExE,CAAA,GAEEE,IAAa,MAAM;AACvB,IAAApB,EAAQqB,EAAgB,8CAA8C,EAAE,cAAAtB,EAAA,CAAc;AAAA,EACxF;AAEA,2BACGuB,GAAA,EAAW,OAAOhB,EAAQ,cAAc,QAAQ,iBAAAZ,GAC/C,UAAA,gBAAAE;AAAA,IAACQ,EAAW;AAAA,IAAX;AAAA,MACC,QACE,gBAAAR;AAAA,QAACQ,EAAW;AAAA,QAAX;AAAA,UACC,OAAOF,EAAE,OAAO;AAAA,UAChB,QACE,gBAAAN;AAAA,YAACQ,EAAW;AAAA,YAAX;AAAA,cACC,SAAQ;AAAA,cACR,SAASgB;AAAA,cACT,YAAYZ;AAAA,cAEX,YAAE,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACd;AAAA,MAAA;AAAA,MAKL,UAAAA,IACC,gBAAAZ,EAAC2B,GAAA,CAAA,CAAQ,IACPd,IACF,gBAAAb,EAACQ,EAAW,iBAAX,EAA2B,OAAOe,EAAA,CAAc,IAC/C;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}

package/dist/components/Contractor/Profile/shared/useContractorDetailsForm/contractorDetailsSchema.js

@@ -2,7 +2,7 @@ import { z as e } from "zod";
 import { ContractorType as E, ContractorWageType as c } from "@gusto/embedded-api/models/components/contractor";
 import { buildFormSchema as N } from "../../../../../partner-hook-utils/form/buildFormSchema.js";
 import { coerceNaN as d, coerceToISODate as R } from "../../../../../partner-hook-utils/form/preprocessors.js";
-import { EIN_REGEX as p, SSN_REGEX as u, NAME_REGEX as I } from "../../../../../helpers/validations.js";
+import { EIN_REGEX as p, SSN_REGEX as u, NAME_REGEX as m } from "../../../../../helpers/validations.js";
 import { normalizeEin as A } from "../../../../../helpers/federalEin.js";
 const o = E, n = c, r = {
   REQUIRED: "REQUIRED",
@@ -25,8 +25,8 @@ const o = E, n = c, r = {
   selfOnboarding: e.boolean(),
   fileNewHireReport: e.boolean(),
   email: e.email({ error: () => r.INVALID_EMAIL }),
-  firstName: e.string().min(1, { message: r.REQUIRED }).regex(I, { message: r.INVALID_NAME }),
-  lastName: e.string().min(1, { message: r.REQUIRED }).regex(I, { message: r.INVALID_NAME }),
+  firstName: e.string().trim().min(1, { message: r.REQUIRED }).regex(m, { message: r.INVALID_NAME }),
+  lastName: e.string().trim().min(1, { message: r.REQUIRED }).regex(m, { message: r.INVALID_NAME }),
   middleInitial: e.string(),
   businessName: e.string(),
   workState: e.string(),
@@ -49,8 +49,8 @@ const o = E, n = c, r = {
   email: (t) => t.selfOnboarding
 };
 function U(t = {}) {
-  const { mode: i = "create", optionalFieldsToRequire: s, hasSsn: m = !1, hasEin: l = !1 } = t, a = [];
-  return m && a.push("ssn"), l && a.push("ein"), N(D, {
+  const { mode: i = "create", optionalFieldsToRequire: s, hasSsn: I = !1, hasEin: l = !1 } = t, a = [];
+  return I && a.push("ssn"), l && a.push("ein"), N(D, {
     requiredFieldsConfig: g,
     requiredErrorCode: r.REQUIRED,
     mode: i,