@gusto/embedded-react-sdk 0.55.3 → 0.55.5

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

@@ -1,49 +1,59 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useState as b, useMemo as i, useCallback as k } from "react";
-import { useContractorPaymentGroupsGetListSuspense as E } from "@gusto/embedded-api/react-query/contractorPaymentGroupsGetList";
-import { useInformationRequestsGetInformationRequestsSuspense as B } from "@gusto/embedded-api/react-query/informationRequestsGetInformationRequests";
+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 G } from "./PaymentsListPresentation.js";
-import { useComponentDictionary as Y } from "../../../../i18n/I18n.js";
-import { BaseComponent as U } from "../../../Base/Base.js";
+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 "../../../Base/useBase.js";
-import { componentEvents as a } from "../../../../shared/constants.js";
-import { usePagination as W } from "../../../../hooks/usePagination/usePagination.js";
-function et(t) {
-  return /* @__PURE__ */ c(v, { ...t });
+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 });
 }
-function v(t) {
-  return /* @__PURE__ */ c(U, { ...t, children: /* @__PURE__ */ c(H, { ...t, children: t.children }) });
+function V(t) {
+  return /* @__PURE__ */ r(x, { ...t, children: /* @__PURE__ */ r(z, { ...t, children: t.children }) });
 }
-const x = (t = 3) => {
-  const o = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
-  return e.setMonth(e.getMonth() - t), o.setMonth(o.getMonth() + (12 - t)), {
+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: o.toISOString().split("T")[0] || ""
+    endDate: s.toISOString().split("T")[0] || ""
   };
-}, H = ({ companyId: t, dictionary: o, onEvent: e, alerts: R }) => {
-  Y("Contractor.Payments.PaymentsList", o);
-  const [m, C] = b(3), { currentPage: T, itemsPerPage: h, getPaginationProps: A } = W(), { startDate: D, endDate: O } = i(() => x(m), [m]), { data: f } = E({
-    companyId: t,
-    startDate: D,
-    endDate: O,
-    page: T,
-    per: h
-  }), u = f.contractorPaymentGroupWithBlockers || [], y = A(f.httpMeta.response.headers), { data: M } = B({
+}, z = ({
+  companyId: t,
+  dictionary: s,
+  onEvent: e,
+  alerts: R,
+  LoaderComponent: h
+}) => {
+  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(
+    {
+      companyId: t,
+      startDate: y,
+      endDate: A,
+      page: T,
+      per: D
+    },
+    { placeholderData: G, throwOnError: !0 }
+  ), p = u?.contractorPaymentGroupWithBlockers || [], { data: w } = v({
     companyUuid: t
-  }), p = M.informationRequests ?? [], _ = i(() => u.some((n) => (n.creditBlockers || []).some((r) => {
-    if (r.status !== "unresolved") return !1;
-    const s = r.unblockOptions?.find(
-      (L) => L.unblockType === "submit_wire"
+  }), 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"
     );
-    return s && "metadata" in s && s.metadata.wireInRequestUuid;
-  })), [u]), l = k(() => {
-    e(a.CONTRACTOR_PAYMENT_RFI_RESPOND);
-  }, [e]), P = i(() => {
-    const n = [], d = p.some(
-      (s) => s.status === g.PendingResponse
-    ), r = p.some(
-      (s) => s.status === g.PendingReview
+    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
     );
     return d ? n.push({
       type: "error",
@@ -51,39 +61,42 @@ const x = (t = 3) => {
       content: "rfiPendingResponseDescription",
       onAction: l,
       actionLabel: "rfiRespondCta"
-    }) : r && n.push({
+    }) : i && n.push({
       type: "info",
       title: "rfiPendingReviewTitle",
       content: "rfiPendingReviewDescription"
     }), n;
-  }, [p, l]), w = () => {
-    e(a.CONTRACTOR_PAYMENT_CREATE);
-  }, I = () => {
-    e(a.CONTRACTOR_HISTORICAL_PAYMENT_CREATE);
-  }, N = (n) => {
+  }, [f, l]), I = () => {
+    e(c.CONTRACTOR_PAYMENT_CREATE);
+  }, N = () => {
+    e(c.CONTRACTOR_HISTORICAL_PAYMENT_CREATE);
+  }, L = (n) => {
     C(n);
   }, S = (n) => {
-    e(a.CONTRACTOR_PAYMENT_VIEW, { paymentId: n });
-  }, q = i(() => [...P, ...R || []], [P, R]);
-  return /* @__PURE__ */ c(
-    G,
+    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,
     {
-      contractorPayments: u,
+      contractorPayments: p,
       numberOfMonths: m,
-      onCreatePayment: w,
-      onCreateHistoricalPayment: I,
-      onDateRangeChange: N,
+      onCreatePayment: I,
+      onCreateHistoricalPayment: N,
+      onDateRangeChange: L,
       onViewPayment: S,
       alerts: q,
       companyId: t,
       hasUnresolvedWireInRequests: _,
       onEvent: e,
-      paginationProps: y
+      paginationProps: k
     }
   );
 };
 export {
-  et as PaymentsList,
-  v as PaymentsListInternal
+  it as PaymentsList,
+  V 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 { useContractorPaymentGroupsGetListSuspense } 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, 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 = ({ companyId, dictionary, onEvent, alerts }: 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 } = useContractorPaymentGroupsGetListSuspense({\n    companyId,\n    startDate,\n    endDate,\n    page: currentPage,\n    per: itemsPerPage,\n  })\n  const contractorPayments = data.contractorPaymentGroupWithBlockers || []\n  const paginationProps = getPaginationProps(data.httpMeta.response.headers)\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  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","useComponentDictionary","numberOfMonths","setNumberOfMonths","useState","currentPage","itemsPerPage","getPaginationProps","usePagination","useMemo","data","useContractorPaymentGroupsGetListSuspense","contractorPayments","paginationProps","informationRequestsData","useInformationRequestsGetInformationRequestsSuspense","informationRequests","hasUnresolvedWireInRequests","payment","blocker","wireOption","option","handleRespondToRfi","useCallback","componentEvents","rfiAlerts","rfiAlertsArray","hasPendingResponseRfis","request","InformationRequestStatus","hasPendingReviewRfis","onCreatePayment","onCreateHistoricalPayment","handleDateRangeChange","onViewPayment","paymentId","allAlerts","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  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":";;;;;;;;;;;;AAkDO,SAASA,GAAaC,GAA0B;AACrD,SAAO,gBAAAC,EAACC,GAAA,EAAsB,GAAGF,EAAA,CAAO;AAC1C;AAQO,SAASE,EAAqBF,GAAkC;AACrE,SACE,gBAAAC,EAACE,GAAA,EAAe,GAAGH,GACjB,UAAA,gBAAAC,EAACG,KAAM,GAAGJ,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMK,IAAqB,CAACC,IAAiB,MAAM;AACjD,QAAMC,wBAAc,KAAA,GACdC,wBAAgB,KAAA;AAEtB,SAAAA,EAAU,SAASA,EAAU,SAAA,IAAaF,CAAM,GAEhDC,EAAQ,SAASA,EAAQ,SAAA,KAAc,KAAKD,EAAO,GAE5C;AAAA,IACL,WAAWE,EAAU,YAAA,EAAc,MAAM,GAAG,EAAE,CAAC,KAAK;AAAA,IACpD,SAASD,EAAQ,YAAA,EAAc,MAAM,GAAG,EAAE,CAAC,KAAK;AAAA,EAAA;AAEpD,GAEMH,IAAO,CAAC;AAAA,EACZ,WAAAK;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,iBAAAC;AACF,MAAiC;AAC/B,EAAAC,EAAuB,oCAAoCJ,CAAU;AAErE,QAAM,CAACK,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAChD,EAAE,aAAAC,GAAa,cAAAC,GAAc,oBAAAC,EAAA,IAAuBC,EAAA,GAEpD,EAAE,WAAAb,GAAW,SAAAD,EAAA,IAAYe,EAAQ,MAAMjB,EAAmBU,CAAc,GAAG,CAACA,CAAc,CAAC,GAE3F,EAAE,MAAAQ,GAAM,YAAAC,EAAA,IAAeC;AAAA,IAC3B;AAAA,MACE,WAAAhB;AAAA,MACA,WAAAD;AAAA,MACA,SAAAD;AAAA,MACA,MAAMW;AAAA,MACN,KAAKC;AAAA,IAAA;AAAA,IAEP,EAAE,iBAAiBO,GAAkB,cAAc,GAAA;AAAA,EAAK,GAEpDC,IAAqBJ,GAAM,sCAAsC,CAAA,GAEjE,EAAE,MAAMK,EAAA,IAA4BC,EAAqD;AAAA,IAC7F,aAAapB;AAAA,EAAA,CACd,GACKqB,IAAsBF,EAAwB,uBAAuB,CAAA,GAErEG,IAA8BT,EAAQ,MACnCK,EAAmB,KAAK,CAAAK,OACNA,EAAQ,kBAAkB,CAAA,GAC3B,KAAK,CAAAC,MAAW;AACpC,QAAIA,EAAQ,WAAW,aAAc,QAAO;AAC5C,UAAMC,IAAaD,EAAQ,gBAAgB;AAAA,MACzC,CAAAE,MAAUA,EAAO,gBAAgB;AAAA,IAAA;AAEnC,WAAOD,KAAc,cAAcA,KAAcA,EAAW,SAAS;AAAA,EACvE,CAAC,CACF,GACA,CAACP,CAAkB,CAAC,GAEjBS,IAAqBC,EAAY,MAAM;AAC3C,IAAA1B,EAAQ2B,EAAgB,8BAA8B;AAAA,EACxD,GAAG,CAAC3B,CAAO,CAAC,GAEN4B,IAAYjB,EAAQ,MAAM;AAC9B,UAAMkB,IAAkC,CAAA,GAElCC,IAAyBX,EAAoB;AAAA,MACjD,CAAAY,MAAWA,EAAQ,WAAWC,EAAyB;AAAA,IAAA,GAEnDC,IAAuBd,EAAoB;AAAA,MAC/C,CAAAY,MAAWA,EAAQ,WAAWC,EAAyB;AAAA,IAAA;AAGzD,WAAIF,IACFD,EAAe,KAAK;AAAA,MAClB,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAUJ;AAAA,MACV,aAAa;AAAA,IAAA,CACd,IACQQ,KACTJ,EAAe,KAAK;AAAA,MAClB,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,IAAA,CACV,GAGIA;AAAA,EACT,GAAG,CAACV,GAAqBM,CAAkB,CAAC,GAEtCS,IAAkB,MAAM;AAC5B,IAAAlC,EAAQ2B,EAAgB,yBAAyB;AAAA,EACnD,GAEMQ,IAA4B,MAAM;AACtC,IAAAnC,EAAQ2B,EAAgB,oCAAoC;AAAA,EAC9D,GAEMS,IAAwB,CAAChC,MAA2B;AACxD,IAAAC,EAAkBD,CAAc;AAAA,EAClC,GAEMiC,IAAgB,CAACC,MAAsB;AAC3C,IAAAtC,EAAQ2B,EAAgB,yBAAyB,EAAE,WAAAW,EAAA,CAAW;AAAA,EAChE,GAEMC,IAAY5B,EAAQ,MACjB,CAAC,GAAGiB,GAAW,GAAI3B,KAAU,CAAA,CAAG,GACtC,CAAC2B,GAAW3B,CAAM,CAAC;AAEtB,MAAI,CAACW;AACH,WAAO,gBAAAtB,EAACkD,GAAA,EAAW,WAAS,IAAC,iBAAAtC,EAAA,CAAkC;AAGjE,QAAMuC,IAAkBhC,EAAmBG,EAAK,SAAS,SAAS,SAASC,CAAU;AAErF,SACE,gBAAAvB;AAAA,IAACoD;AAAA,IAAA;AAAA,MACC,oBAAA1B;AAAA,MACA,gBAAAZ;AAAA,MACA,iBAAA8B;AAAA,MACA,2BAAAC;AAAA,MACA,mBAAmBC;AAAA,MACnB,eAAAC;AAAA,MACA,QAAQE;AAAA,MACR,WAAAzC;AAAA,MACA,6BAAAsB;AAAA,MACA,SAAApB;AAAA,MACA,iBAAAyC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -8,32 +8,32 @@ import { useComponentContext as R } from "../../../../contexts/ComponentAdapter/
 import { useI18n as T } from "../../../../i18n/I18n.js";
 import V from "../../../../hooks/useNumberFormatter.js";
 import B from "../../../../assets/icons/eye.svg.js";
-import h from "../../../../assets/icons/plus-circle.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 = ({
-  contractorPayments: l,
-  numberOfMonths: p,
-  onCreatePayment: s,
-  onCreateHistoricalPayment: y,
-  onDateRangeChange: f,
-  onViewPayment: b,
+  contractorPayments: s,
+  numberOfMonths: y,
+  onCreatePayment: l,
+  onCreateHistoricalPayment: f,
+  onDateRangeChange: b,
+  onViewPayment: g,
   alerts: c = [],
-  companyId: g,
-  hasUnresolvedWireInRequests: C,
+  companyId: C,
+  hasUnresolvedWireInRequests: D,
   onEvent: P,
-  paginationProps: D
+  paginationProps: m
 }) => {
-  const { Box: v, Button: r, Heading: m, Text: d, Select: x, ButtonIcon: L, Alert: w } = R();
+  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"), u = V("currency"), { formatLongWithYear: A } = I(), N = [
+  const { t: n } = $("Contractor.Payments.PaymentsList"), h = V("currency"), { formatLongWithYear: A } = I(), F = [
     { value: "3", label: n("dateRanges.last3Months") },
     { value: "6", label: n("dateRanges.last6Months") }
-  ], { ...j } = E({
-    data: l,
+  ], { ...N } = E({
+    data: s,
     columns: [
       {
         title: n("paymentDateColumnLabel"),
@@ -42,12 +42,12 @@ const at = ({
       {
         title: n("wageTotalColumnLabel"),
         justify: "end",
-        render: ({ totals: e }) => u(Number(e?.wageAmount || 0))
+        render: ({ totals: e }) => h(Number(e?.wageAmount || 0))
       },
       {
         title: n("reimbursementTotalColumnLabel"),
         justify: "end",
-        render: ({ totals: e }) => u(Number(e?.reimbursementAmount) || 0)
+        render: ({ totals: e }) => h(Number(e?.reimbursementAmount) || 0)
       }
     ],
     itemMenu: ({ uuid: e }) => /* @__PURE__ */ t(
@@ -56,7 +56,7 @@ const at = ({
         "aria-label": n("viewPaymentCta"),
         variant: "tertiary",
         onClick: () => {
-          b(e || "");
+          g(e || "");
         },
         children: /* @__PURE__ */ t(B, { "aria-hidden": !0 })
       }
@@ -65,17 +65,18 @@ const at = ({
       r,
       {
         variant: "secondary",
-        icon: /* @__PURE__ */ t(h, { "aria-hidden": !0 }),
-        onClick: s,
+        icon: /* @__PURE__ */ t(p, { "aria-hidden": !0 }),
+        onClick: l,
         children: n("createPaymentCta")
       }
     ) }) }),
-    pagination: D
+    pagination: m,
+    isFetching: m?.isFetching
   });
   return /* @__PURE__ */ a(i, { flexDirection: "column", gap: 24, children: [
-    /* @__PURE__ */ t(i, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ t(m, { as: "h1", styledAs: "h2", children: n("title") }) }),
-    C && /* @__PURE__ */ t(M, { companyId: g, onEvent: P }),
-    c.length > 0 && /* @__PURE__ */ t(i, { flexDirection: "column", gap: 16, children: c.map((e, F) => /* @__PURE__ */ t(
+    /* @__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,
       {
         label: n(`alerts.${e.title}`, e.translationParams),
@@ -86,7 +87,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}-${F}`
+      `${e.type}-${e.title}-${j}`
     )) }),
     /* @__PURE__ */ a(
       i,
@@ -102,29 +103,29 @@ const at = ({
         },
         justifyContent: "space-between",
         children: [
-          /* @__PURE__ */ t(m, { as: "h2", styledAs: "h4", children: n("subtitle") }),
+          /* @__PURE__ */ t(d, { as: "h2", styledAs: "h4", children: n("subtitle") }),
           /* @__PURE__ */ a("div", { className: o.actionsContainer, children: [
             /* @__PURE__ */ t(
               x,
               {
                 id: "date-range-select",
-                value: p.toString(),
+                value: y.toString(),
                 onChange: (e) => {
-                  f(Number(e));
+                  b(Number(e));
                 },
-                options: N,
+                options: F,
                 isRequired: !0,
                 label: n("startDate"),
                 placeholder: "",
                 shouldVisuallyHideLabel: !0
               }
             ),
-            l.length > 0 && /* @__PURE__ */ t(
+            s.length > 0 && /* @__PURE__ */ t(
               r,
               {
-                onClick: s,
+                onClick: l,
                 variant: "secondary",
-                icon: /* @__PURE__ */ t(h, { "aria-hidden": !0 }),
+                icon: /* @__PURE__ */ t(p, { "aria-hidden": !0 }),
                 className: o.nowrap,
                 children: n("createPaymentCta")
               }
@@ -133,15 +134,15 @@ const at = ({
         ]
       }
     ),
-    /* @__PURE__ */ t(H, { label: n("subtitle"), ...j }),
+    /* @__PURE__ */ t(H, { label: n("subtitle"), ...N }),
     /* @__PURE__ */ t(W, { feature: "historicalPayments", children: /* @__PURE__ */ t("div", { className: o.historicalPaymentCta, children: /* @__PURE__ */ t(
       v,
       {
         header: /* @__PURE__ */ a(i, { flexDirection: "column", gap: 4, children: [
-          /* @__PURE__ */ t(d, { weight: "semibold", children: n("historicalPaymentCta.title") }),
-          /* @__PURE__ */ t(d, { variant: "supporting", children: n("historicalPaymentCta.description") })
+          /* @__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: y, children: n("historicalPaymentCta.button") })
+        footer: /* @__PURE__ */ t(r, { variant: "secondary", onClick: f, children: n("historicalPaymentCta.button") })
       }
     ) }) })
   ] });

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  })\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  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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"}