@gusto/embedded-react-sdk 0.55.7 → 0.55.8

package/dist/components/Contractor/Payments/PaymentHistory/PaymentHistoryPresentation.js

@@ -1,38 +1,39 @@
-import { jsxs as a, jsx as r, Fragment as x } from "react/jsx-runtime";
-import { useTranslation as D, Trans as C } from "react-i18next";
-import { getContractorDisplayName as N } from "../../shared/helpers.js";
-import { getContractorPaymentTotalAmount as P } from "../shared/paymentAmounts.js";
+import { jsxs as a, jsx as r, Fragment as D } from "react/jsx-runtime";
+import { useTranslation as C, Trans as N } from "react-i18next";
+import { getContractorDisplayName as P } from "../../shared/helpers.js";
+import { getContractorPaymentTotalAmount as T } from "../shared/paymentAmounts.js";
 import u from "./PaymentHistoryPresentation.module.scss.js";
 import { Flex as i } from "../../../Common/Flex/Flex.js";
-import { EmptyData as T } from "../../../Common/EmptyData/EmptyData.js";
-import { HamburgerMenu as j } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useComponentContext as w } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as F } from "../../../../i18n/I18n.js";
-import { formatHoursDisplay as v } from "../../../Payroll/helpers.js";
-import S from "../../../../hooks/useNumberFormatter.js";
-import { useDateFormatter as L } from "../../../../hooks/useDateFormatter.js";
-import M from "../../../../assets/icons/eye.svg.js";
-import k from "../../../../assets/icons/slash-circle.svg.js";
-import { DataView as E } from "../../../Common/DataView/DataView.js";
-const Z = ({
+import { EmptyData as j } from "../../../Common/EmptyData/EmptyData.js";
+import { HamburgerMenu as w } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useComponentContext as F } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as v } from "../../../../i18n/I18n.js";
+import { formatHoursDisplay as S } from "../../../Payroll/helpers.js";
+import L from "../../../../hooks/useNumberFormatter.js";
+import { useDateFormatter as M } from "../../../../hooks/useDateFormatter.js";
+import k from "../../../../assets/icons/eye.svg.js";
+import E from "../../../../assets/icons/slash-circle.svg.js";
+import { DataView as R } from "../../../Common/DataView/DataView.js";
+const _ = ({
+  className: p,
   paymentGroup: s,
-  contractors: p,
-  onViewPayment: y,
-  onCancelPayment: f,
-  isCancelling: b
+  contractors: y,
+  onViewPayment: f,
+  onCancelPayment: b,
+  isCancelling: g
 }) => {
-  const { Text: m, Heading: l } = w();
-  F("Contractor.Payments.PaymentHistory");
-  const { t } = D("Contractor.Payments.PaymentHistory"), o = S("currency"), { formatLongWithYear: g } = L(), d = s.contractorPayments || [], h = (e) => e.wageType === "Hourly" && e.hourlyRate ? `${o(Number(e.hourlyRate || "0"))}${t("perHour")}` : e.wageType;
-  return /* @__PURE__ */ a(i, { flexDirection: "column", gap: 32, children: [
+  const { Text: m, Heading: l } = F();
+  v("Contractor.Payments.PaymentHistory");
+  const { t } = C("Contractor.Payments.PaymentHistory"), o = L("currency"), { formatLongWithYear: h } = M(), d = s.contractorPayments || [], H = (e) => e.wageType === "Hourly" && e.hourlyRate ? `${o(Number(e.hourlyRate || "0"))}${t("perHour")}` : e.wageType;
+  return /* @__PURE__ */ a(i, { className: p, flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ a(i, { flexDirection: "column", gap: 8, children: [
       /* @__PURE__ */ r(l, { as: "h2", children: t("title") }),
       /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
-        C,
+        N,
         {
           i18nKey: "subtitle",
           t,
-          values: { date: g(s.debitDate) },
+          values: { date: h(s.debitDate) },
           components: {
             strong: /* @__PURE__ */ r(m, { weight: "bold", as: "span" })
           }
@@ -41,19 +42,19 @@ const Z = ({
     ] }),
     /* @__PURE__ */ a(i, { flexDirection: "column", gap: 16, children: [
       /* @__PURE__ */ r(l, { as: "h2", children: t("paymentsSection") }),
-      d.length === 0 ? /* @__PURE__ */ r(T, { title: t("noPaymentsFound"), description: t("noPaymentsDescription") }) : /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(
-        E,
+      d.length === 0 ? /* @__PURE__ */ r(j, { title: t("noPaymentsFound"), description: t("noPaymentsDescription") }) : /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(
+        R,
         {
           columns: [
             {
               title: t("tableHeaders.contractor"),
-              render: ({ contractorUuid: e }) => N(
-                p.find((n) => n.uuid === e)
+              render: ({ contractorUuid: e }) => P(
+                y.find((n) => n.uuid === e)
               )
             },
             {
               title: t("tableHeaders.wageType"),
-              render: (e) => h(e)
+              render: (e) => H(e)
             },
             {
               title: t("tableHeaders.paymentMethod"),
@@ -62,7 +63,7 @@ const Z = ({
             {
               title: t("tableHeaders.hours"),
               justify: "end",
-              render: ({ wageType: e, hours: n }) => e === "Fixed" ? t("na") : n ? v(Number(n)) : "–"
+              render: ({ wageType: e, hours: n }) => e === "Fixed" ? t("na") : n ? S(Number(n)) : "–"
             },
             {
               title: t("tableHeaders.wage"),
@@ -82,31 +83,31 @@ const Z = ({
             {
               title: t("tableHeaders.total"),
               justify: "end",
-              render: (e) => e.wageTotal ? o(P(e)) : "–"
+              render: (e) => e.wageTotal ? o(T(e)) : "–"
             }
           ],
-          itemMenu: ({ contractorUuid: e, mayCancel: n, uuid: H }) => {
+          itemMenu: ({ contractorUuid: e, mayCancel: n, uuid: x }) => {
             const c = [
               {
                 label: t("actions.view"),
                 onClick: () => {
-                  y(e);
+                  f(e);
                 },
-                icon: /* @__PURE__ */ r("span", { className: u.icon, children: /* @__PURE__ */ r(M, { "aria-hidden": !0 }) })
+                icon: /* @__PURE__ */ r("span", { className: u.icon, children: /* @__PURE__ */ r(k, { "aria-hidden": !0 }) })
               }
             ];
             return n && c.push({
               label: t("actions.cancel"),
               onClick: () => {
-                f(H);
+                b(x);
               },
-              icon: /* @__PURE__ */ r("span", { className: u.icon, children: /* @__PURE__ */ r(k, { "aria-hidden": !0 }) })
+              icon: /* @__PURE__ */ r("span", { className: u.icon, children: /* @__PURE__ */ r(E, { "aria-hidden": !0 }) })
             }), /* @__PURE__ */ r(
-              j,
+              w,
               {
                 items: c,
                 triggerLabel: t("tableHeaders.action"),
-                isLoading: b
+                isLoading: g
               }
             );
           },
@@ -118,6 +119,6 @@ const Z = ({
   ] });
 };
 export {
-  Z as PaymentHistoryPresentation
+  _ as PaymentHistoryPresentation
 };
 //# sourceMappingURL=PaymentHistoryPresentation.js.map

package/dist/components/Contractor/Payments/PaymentHistory/PaymentHistoryPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentHistoryPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentHistory/PaymentHistoryPresentation.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroup } from '@gusto/embedded-api/models/components/contractorpaymentgroup'\nimport type { ContractorPaymentForGroup } from '@gusto/embedded-api/models/components/contractorpaymentforgroup'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { getContractorDisplayName } from '../../shared/helpers'\nimport { getContractorPaymentTotalAmount } from '../shared/paymentAmounts'\nimport styles from './PaymentHistoryPresentation.module.scss'\nimport { DataView, Flex, EmptyData } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport EyeIcon from '@/assets/icons/eye.svg?react'\nimport CancelIcon from '@/assets/icons/slash-circle.svg?react'\n\ninterface PaymentHistoryPresentationProps {\n  paymentGroup: ContractorPaymentGroup\n  contractors: Contractor[]\n  onViewPayment: (paymentId: string) => void\n  onCancelPayment: (paymentId: string) => void\n  isCancelling: boolean\n}\n\n/** @internal */\nexport const PaymentHistoryPresentation = ({\n  paymentGroup,\n  contractors,\n  onViewPayment,\n  onCancelPayment,\n  isCancelling,\n}: PaymentHistoryPresentationProps) => {\n  const { Text, Heading } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentHistory')\n  const { t } = useTranslation('Contractor.Payments.PaymentHistory')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const payments = paymentGroup.contractorPayments || []\n\n  const formatWageType = (contractor: ContractorPaymentForGroup) => {\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `${currencyFormatter(Number(contractor.hourlyRate || '0'))}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex flexDirection=\"column\" gap={8}>\n        <Heading as=\"h2\">{t('title')}</Heading>\n        <Text>\n          <Trans\n            i18nKey={'subtitle'}\n            t={t}\n            values={{ date: formatLongWithYear(paymentGroup.debitDate) }}\n            components={{\n              strong: <Text weight=\"bold\" as=\"span\" />,\n            }}\n          />\n        </Text>\n      </Flex>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h2\">{t('paymentsSection')}</Heading>\n\n        {payments.length === 0 ? (\n          <EmptyData title={t('noPaymentsFound')} description={t('noPaymentsDescription')} />\n        ) : (\n          <>\n            <DataView\n              columns={[\n                {\n                  title: t('tableHeaders.contractor'),\n                  render: ({ contractorUuid }) =>\n                    getContractorDisplayName(\n                      contractors.find(contractor => contractor.uuid === contractorUuid),\n                    ),\n                },\n                {\n                  title: t('tableHeaders.wageType'),\n                  render: contractor => formatWageType(contractor),\n                },\n                {\n                  title: t('tableHeaders.paymentMethod'),\n                  render: ({ paymentMethod }) => paymentMethod,\n                },\n                {\n                  title: t('tableHeaders.hours'),\n                  justify: 'end',\n                  render: ({ wageType, hours }) =>\n                    wageType === 'Fixed'\n                      ? t('na')\n                      : hours\n                        ? formatHoursDisplay(Number(hours))\n                        : '–',\n                },\n                {\n                  title: t('tableHeaders.wage'),\n                  justify: 'end',\n                  render: ({ wageType, wage }) =>\n                    wageType === 'Hourly' ? t('na') : wage ? currencyFormatter(Number(wage)) : '–',\n                },\n                {\n                  title: t('tableHeaders.bonus'),\n                  justify: 'end',\n                  render: ({ bonus }) => (bonus ? currencyFormatter(Number(bonus)) : '–'),\n                },\n                {\n                  title: t('tableHeaders.reimbursements'),\n                  justify: 'end',\n                  render: ({ reimbursement }) =>\n                    reimbursement ? currencyFormatter(Number(reimbursement)) : '–',\n                },\n                {\n                  title: t('tableHeaders.total'),\n                  justify: 'end',\n                  render: contractorPayment =>\n                    contractorPayment.wageTotal\n                      ? currencyFormatter(getContractorPaymentTotalAmount(contractorPayment))\n                      : '–',\n                },\n              ]}\n              itemMenu={({ contractorUuid, mayCancel, uuid }) => {\n                const items = [\n                  {\n                    label: t('actions.view'),\n                    onClick: () => {\n                      onViewPayment(contractorUuid!)\n                    },\n                    icon: (\n                      <span className={styles.icon}>\n                        <EyeIcon aria-hidden />\n                      </span>\n                    ),\n                  },\n                ]\n                if (mayCancel) {\n                  items.push({\n                    label: t('actions.cancel'),\n                    onClick: () => {\n                      onCancelPayment(uuid!)\n                    },\n                    icon: (\n                      <span className={styles.icon}>\n                        <CancelIcon aria-hidden />\n                      </span>\n                    ),\n                  })\n                }\n                return (\n                  <HamburgerMenu\n                    items={items}\n                    triggerLabel={t('tableHeaders.action')}\n                    isLoading={isCancelling}\n                  />\n                )\n              }}\n              data={payments}\n              label={t('title')}\n            />\n          </>\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["PaymentHistoryPresentation","paymentGroup","contractors","onViewPayment","onCancelPayment","isCancelling","Text","Heading","useComponentContext","useI18n","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","payments","formatWageType","contractor","jsxs","Flex","jsx","Trans","EmptyData","Fragment","DataView","contractorUuid","getContractorDisplayName","paymentMethod","wageType","hours","formatHoursDisplay","wage","bonus","reimbursement","contractorPayment","getContractorPaymentTotalAmount","mayCancel","uuid","items","styles","EyeIcon","CancelIcon","HamburgerMenu"],"mappings":"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"}
+{"version":3,"file":"PaymentHistoryPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentHistory/PaymentHistoryPresentation.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroup } from '@gusto/embedded-api/models/components/contractorpaymentgroup'\nimport type { ContractorPaymentForGroup } from '@gusto/embedded-api/models/components/contractorpaymentforgroup'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { getContractorDisplayName } from '../../shared/helpers'\nimport { getContractorPaymentTotalAmount } from '../shared/paymentAmounts'\nimport styles from './PaymentHistoryPresentation.module.scss'\nimport { DataView, Flex, EmptyData } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport EyeIcon from '@/assets/icons/eye.svg?react'\nimport CancelIcon from '@/assets/icons/slash-circle.svg?react'\n\ninterface PaymentHistoryPresentationProps {\n  /** CSS class name applied to the root element. */\n  className?: string\n  paymentGroup: ContractorPaymentGroup\n  contractors: Contractor[]\n  onViewPayment: (paymentId: string) => void\n  onCancelPayment: (paymentId: string) => void\n  isCancelling: boolean\n}\n\n/** @internal */\nexport const PaymentHistoryPresentation = ({\n  className,\n  paymentGroup,\n  contractors,\n  onViewPayment,\n  onCancelPayment,\n  isCancelling,\n}: PaymentHistoryPresentationProps) => {\n  const { Text, Heading } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentHistory')\n  const { t } = useTranslation('Contractor.Payments.PaymentHistory')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const payments = paymentGroup.contractorPayments || []\n\n  const formatWageType = (contractor: ContractorPaymentForGroup) => {\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `${currencyFormatter(Number(contractor.hourlyRate || '0'))}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  return (\n    <Flex className={className} flexDirection=\"column\" gap={32}>\n      <Flex flexDirection=\"column\" gap={8}>\n        <Heading as=\"h2\">{t('title')}</Heading>\n        <Text>\n          <Trans\n            i18nKey={'subtitle'}\n            t={t}\n            values={{ date: formatLongWithYear(paymentGroup.debitDate) }}\n            components={{\n              strong: <Text weight=\"bold\" as=\"span\" />,\n            }}\n          />\n        </Text>\n      </Flex>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h2\">{t('paymentsSection')}</Heading>\n\n        {payments.length === 0 ? (\n          <EmptyData title={t('noPaymentsFound')} description={t('noPaymentsDescription')} />\n        ) : (\n          <>\n            <DataView\n              columns={[\n                {\n                  title: t('tableHeaders.contractor'),\n                  render: ({ contractorUuid }) =>\n                    getContractorDisplayName(\n                      contractors.find(contractor => contractor.uuid === contractorUuid),\n                    ),\n                },\n                {\n                  title: t('tableHeaders.wageType'),\n                  render: contractor => formatWageType(contractor),\n                },\n                {\n                  title: t('tableHeaders.paymentMethod'),\n                  render: ({ paymentMethod }) => paymentMethod,\n                },\n                {\n                  title: t('tableHeaders.hours'),\n                  justify: 'end',\n                  render: ({ wageType, hours }) =>\n                    wageType === 'Fixed'\n                      ? t('na')\n                      : hours\n                        ? formatHoursDisplay(Number(hours))\n                        : '–',\n                },\n                {\n                  title: t('tableHeaders.wage'),\n                  justify: 'end',\n                  render: ({ wageType, wage }) =>\n                    wageType === 'Hourly' ? t('na') : wage ? currencyFormatter(Number(wage)) : '–',\n                },\n                {\n                  title: t('tableHeaders.bonus'),\n                  justify: 'end',\n                  render: ({ bonus }) => (bonus ? currencyFormatter(Number(bonus)) : '–'),\n                },\n                {\n                  title: t('tableHeaders.reimbursements'),\n                  justify: 'end',\n                  render: ({ reimbursement }) =>\n                    reimbursement ? currencyFormatter(Number(reimbursement)) : '–',\n                },\n                {\n                  title: t('tableHeaders.total'),\n                  justify: 'end',\n                  render: contractorPayment =>\n                    contractorPayment.wageTotal\n                      ? currencyFormatter(getContractorPaymentTotalAmount(contractorPayment))\n                      : '–',\n                },\n              ]}\n              itemMenu={({ contractorUuid, mayCancel, uuid }) => {\n                const items = [\n                  {\n                    label: t('actions.view'),\n                    onClick: () => {\n                      onViewPayment(contractorUuid!)\n                    },\n                    icon: (\n                      <span className={styles.icon}>\n                        <EyeIcon aria-hidden />\n                      </span>\n                    ),\n                  },\n                ]\n                if (mayCancel) {\n                  items.push({\n                    label: t('actions.cancel'),\n                    onClick: () => {\n                      onCancelPayment(uuid!)\n                    },\n                    icon: (\n                      <span className={styles.icon}>\n                        <CancelIcon aria-hidden />\n                      </span>\n                    ),\n                  })\n                }\n                return (\n                  <HamburgerMenu\n                    items={items}\n                    triggerLabel={t('tableHeaders.action')}\n                    isLoading={isCancelling}\n                  />\n                )\n              }}\n              data={payments}\n              label={t('title')}\n            />\n          </>\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["PaymentHistoryPresentation","className","paymentGroup","contractors","onViewPayment","onCancelPayment","isCancelling","Text","Heading","useComponentContext","useI18n","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","payments","formatWageType","contractor","Flex","jsxs","jsx","Trans","EmptyData","Fragment","DataView","contractorUuid","getContractorDisplayName","paymentMethod","wageType","hours","formatHoursDisplay","wage","bonus","reimbursement","contractorPayment","getContractorPaymentTotalAmount","mayCancel","uuid","items","styles","EyeIcon","CancelIcon","HamburgerMenu"],"mappings":"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"}

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

@@ -1,50 +1,51 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useContractorPaymentGroupsGetSuspense as d } from "@gusto/embedded-api/react-query/contractorPaymentGroupsGet";
-import { useContractorsListSuspense as f } from "@gusto/embedded-api/react-query/contractorsList";
-import { useContractorPaymentsGetReceipt as P } from "@gusto/embedded-api/react-query/contractorPaymentsGetReceipt";
-import { GustoEmbeddedError as G } from "@gusto/embedded-api/models/errors/gustoembeddederror";
-import { useTranslation as h } from "react-i18next";
-import { PaymentStatementPresentation as w } from "./PaymentStatementPresentation.js";
-import { useComponentDictionary as C } from "../../../../i18n/I18n.js";
-import { BaseComponent as l } from "../../../Base/Base.js";
+import { useContractorPaymentGroupsGetSuspense as f } from "@gusto/embedded-api/react-query/contractorPaymentGroupsGet";
+import { useContractorsListSuspense as P } from "@gusto/embedded-api/react-query/contractorsList";
+import { useContractorPaymentsGetReceipt as G } from "@gusto/embedded-api/react-query/contractorPaymentsGetReceipt";
+import { GustoEmbeddedError as h } from "@gusto/embedded-api/models/errors/gustoembeddederror";
+import { useTranslation as w } from "react-i18next";
+import { PaymentStatementPresentation as C } from "./PaymentStatementPresentation.js";
+import { useComponentDictionary as l } from "../../../../i18n/I18n.js";
+import { BaseComponent as E } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
-function j(o) {
-  return /* @__PURE__ */ a(l, { ...o, children: /* @__PURE__ */ a(E, { ...o, children: o.children }) });
+function B(o) {
+  return /* @__PURE__ */ a(E, { ...o, children: /* @__PURE__ */ a(R, { ...o, children: o.children }) });
 }
-const E = ({ paymentGroupId: o, contractorUuid: c, dictionary: s }) => {
-  C("Contractor.Payments.PaymentStatement", s);
-  const { t: n } = h("Contractor.Payments.PaymentStatement"), { data: r } = d({
+const R = ({ paymentGroupId: o, contractorUuid: c, dictionary: s, className: i }) => {
+  l("Contractor.Payments.PaymentStatement", s);
+  const { t: n } = w("Contractor.Payments.PaymentStatement"), { data: r } = f({
     contractorPaymentGroupUuid: o
   });
   if (!r.contractorPaymentGroup)
     throw new Error(n("errors.paymentGroupNotFound"));
-  const i = r.contractorPaymentGroup.companyUuid, { data: p } = f({ companyUuid: i }), u = p.contractors || [], e = r.contractorPaymentGroup.contractorPayments?.find(
+  const p = r.contractorPaymentGroup.companyUuid, { data: u } = P({ companyUuid: p }), y = u.contractors || [], e = r.contractorPaymentGroup.contractorPayments?.find(
     (t) => t.contractorUuid === c
   );
   if (!e)
     throw new Error(n("errors.paymentNotFound"));
-  const { data: y } = P(
+  const { data: d } = G(
     {
       contractorPaymentUuid: e.uuid
     },
     {
       retry: !1,
-      throwOnError: (t) => !(t instanceof G && t.httpMeta.response.status === 404)
+      throwOnError: (t) => !(t instanceof h && t.httpMeta.response.status === 404)
     }
-  ), m = u.find((t) => t.uuid === c);
+  ), m = y.find((t) => t.uuid === c);
   if (!m)
     throw new Error(n("errors.contractorNotFound"));
   return /* @__PURE__ */ a(
-    w,
+    C,
     {
+      className: i,
       payment: e,
       contractor: m,
-      paymentReceipt: y?.contractorPaymentReceipt,
+      paymentReceipt: d?.contractorPaymentReceipt,
       checkDate: r.contractorPaymentGroup.checkDate || ""
     }
   );
 };
 export {
-  j as PaymentStatement
+  B as PaymentStatement
 };
 //# sourceMappingURL=PaymentStatement.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentStatement.js","sources":["../../../../../src/components/Contractor/Payments/PaymentStatement/PaymentStatement.tsx"],"sourcesContent":["import { useContractorPaymentGroupsGetSuspense } from '@gusto/embedded-api/react-query/contractorPaymentGroupsGet'\nimport { useContractorsListSuspense } from '@gusto/embedded-api/react-query/contractorsList'\nimport { useContractorPaymentsGetReceipt } from '@gusto/embedded-api/react-query/contractorPaymentsGetReceipt'\nimport { GustoEmbeddedError } from '@gusto/embedded-api/models/errors/gustoembeddederror'\nimport { useTranslation } from 'react-i18next'\nimport { PaymentStatementPresentation } from './PaymentStatementPresentation'\nimport { useComponentDictionary } from '@/i18n'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\n\n/**\n * Props for {@link PaymentStatement}.\n *\n * @public\n */\nexport interface PaymentStatementProps extends BaseComponentInterface<'Contractor.Payments.PaymentStatement'> {\n  /** UUID of the contractor payment group the statement belongs to. */\n  paymentGroupId: string\n  /** UUID of the contractor whose payment within the group is being displayed. */\n  contractorUuid: string\n}\n\n/**\n * Displays a single contractor's payment statement within a payment group, including wage breakdown, bonuses, reimbursements, and a receipt card for funded direct-deposit payments.\n *\n * @param props - See {@link PaymentStatementProps}.\n * @returns The rendered payment statement.\n * @public\n */\nexport function PaymentStatement(props: PaymentStatementProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ paymentGroupId, contractorUuid, dictionary }: PaymentStatementProps) => {\n  useComponentDictionary('Contractor.Payments.PaymentStatement', dictionary)\n  const { t } = useTranslation('Contractor.Payments.PaymentStatement')\n  // Fetching entire payment\n  const { data: paymentGroupResponse } = useContractorPaymentGroupsGetSuspense({\n    contractorPaymentGroupUuid: paymentGroupId,\n  })\n\n  if (!paymentGroupResponse.contractorPaymentGroup) {\n    throw new Error(t('errors.paymentGroupNotFound'))\n  }\n\n  const companyId = paymentGroupResponse.contractorPaymentGroup.companyUuid!\n  // Fetching all contractors for the company\n  const { data: contractorList } = useContractorsListSuspense({ companyUuid: companyId })\n  const contractors = contractorList.contractors || []\n  // Locating the payment for the selectedcontractor\n  const payment = paymentGroupResponse.contractorPaymentGroup.contractorPayments?.find(\n    p => p.contractorUuid === contractorUuid,\n  )\n\n  if (!payment) {\n    throw new Error(t('errors.paymentNotFound'))\n  }\n  // Attempting to fetch the payment receipt\n  // Note: 404 is expected for receipts that aren't available (e.g., non-direct deposit or not yet funded)\n  const { data: paymentResponse } = useContractorPaymentsGetReceipt(\n    {\n      contractorPaymentUuid: payment.uuid!,\n    },\n    {\n      retry: false,\n      throwOnError: (error: Error) => {\n        // Ignore 404 errors (receipt not available), but throw other errors\n        if (error instanceof GustoEmbeddedError && error.httpMeta.response.status === 404) {\n          return false\n        }\n        return true\n      },\n    },\n  )\n  const contractor = contractors.find(c => c.uuid === contractorUuid)\n  if (!contractor) {\n    throw new Error(t('errors.contractorNotFound'))\n  }\n\n  return (\n    <PaymentStatementPresentation\n      payment={payment}\n      contractor={contractor}\n      paymentReceipt={paymentResponse?.contractorPaymentReceipt}\n      checkDate={paymentGroupResponse.contractorPaymentGroup.checkDate || ''}\n    />\n  )\n}\n"],"names":["PaymentStatement","props","jsx","BaseComponent","Root","paymentGroupId","contractorUuid","dictionary","useComponentDictionary","t","useTranslation","paymentGroupResponse","useContractorPaymentGroupsGetSuspense","companyId","contractorList","useContractorsListSuspense","contractors","payment","p","paymentResponse","useContractorPaymentsGetReceipt","error","GustoEmbeddedError","contractor","c","PaymentStatementPresentation"],"mappings":";;;;;;;;;;AA4BO,SAASA,EAAiBC,GAA8B;AAC7D,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMG,IAAO,CAAC,EAAE,gBAAAC,GAAgB,gBAAAC,GAAgB,YAAAC,QAAwC;AACtF,EAAAC,EAAuB,wCAAwCD,CAAU;AACzE,QAAM,EAAE,GAAAE,EAAA,IAAMC,EAAe,sCAAsC,GAE7D,EAAE,MAAMC,EAAA,IAAyBC,EAAsC;AAAA,IAC3E,4BAA4BP;AAAA,EAAA,CAC7B;AAED,MAAI,CAACM,EAAqB;AACxB,UAAM,IAAI,MAAMF,EAAE,6BAA6B,CAAC;AAGlD,QAAMI,IAAYF,EAAqB,uBAAuB,aAExD,EAAE,MAAMG,EAAA,IAAmBC,EAA2B,EAAE,aAAaF,GAAW,GAChFG,IAAcF,EAAe,eAAe,CAAA,GAE5CG,IAAUN,EAAqB,uBAAuB,oBAAoB;AAAA,IAC9E,CAAAO,MAAKA,EAAE,mBAAmBZ;AAAA,EAAA;AAG5B,MAAI,CAACW;AACH,UAAM,IAAI,MAAMR,EAAE,wBAAwB,CAAC;AAI7C,QAAM,EAAE,MAAMU,EAAA,IAAoBC;AAAA,IAChC;AAAA,MACE,uBAAuBH,EAAQ;AAAA,IAAA;AAAA,IAEjC;AAAA,MACE,OAAO;AAAA,MACP,cAAc,CAACI,MAET,EAAAA,aAAiBC,KAAsBD,EAAM,SAAS,SAAS,WAAW;AAAA,IAIhF;AAAA,EACF,GAEIE,IAAaP,EAAY,KAAK,CAAAQ,MAAKA,EAAE,SAASlB,CAAc;AAClE,MAAI,CAACiB;AACH,UAAM,IAAI,MAAMd,EAAE,2BAA2B,CAAC;AAGhD,SACE,gBAAAP;AAAA,IAACuB;AAAA,IAAA;AAAA,MACC,SAAAR;AAAA,MACA,YAAAM;AAAA,MACA,gBAAgBJ,GAAiB;AAAA,MACjC,WAAWR,EAAqB,uBAAuB,aAAa;AAAA,IAAA;AAAA,EAAA;AAG1E;"}
+{"version":3,"file":"PaymentStatement.js","sources":["../../../../../src/components/Contractor/Payments/PaymentStatement/PaymentStatement.tsx"],"sourcesContent":["import { useContractorPaymentGroupsGetSuspense } from '@gusto/embedded-api/react-query/contractorPaymentGroupsGet'\nimport { useContractorsListSuspense } from '@gusto/embedded-api/react-query/contractorsList'\nimport { useContractorPaymentsGetReceipt } from '@gusto/embedded-api/react-query/contractorPaymentsGetReceipt'\nimport { GustoEmbeddedError } from '@gusto/embedded-api/models/errors/gustoembeddederror'\nimport { useTranslation } from 'react-i18next'\nimport { PaymentStatementPresentation } from './PaymentStatementPresentation'\nimport { useComponentDictionary } from '@/i18n'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\n\n/**\n * Props for {@link PaymentStatement}.\n *\n * @public\n */\nexport interface PaymentStatementProps extends BaseComponentInterface<'Contractor.Payments.PaymentStatement'> {\n  /** UUID of the contractor payment group the statement belongs to. */\n  paymentGroupId: string\n  /** UUID of the contractor whose payment within the group is being displayed. */\n  contractorUuid: string\n}\n\n/**\n * Displays a single contractor's payment statement within a payment group, including wage breakdown, bonuses, reimbursements, and a receipt card for funded direct-deposit payments.\n *\n * @param props - See {@link PaymentStatementProps}.\n * @returns The rendered payment statement.\n * @public\n */\nexport function PaymentStatement(props: PaymentStatementProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ paymentGroupId, contractorUuid, dictionary, className }: PaymentStatementProps) => {\n  useComponentDictionary('Contractor.Payments.PaymentStatement', dictionary)\n  const { t } = useTranslation('Contractor.Payments.PaymentStatement')\n  // Fetching entire payment\n  const { data: paymentGroupResponse } = useContractorPaymentGroupsGetSuspense({\n    contractorPaymentGroupUuid: paymentGroupId,\n  })\n\n  if (!paymentGroupResponse.contractorPaymentGroup) {\n    throw new Error(t('errors.paymentGroupNotFound'))\n  }\n\n  const companyId = paymentGroupResponse.contractorPaymentGroup.companyUuid!\n  // Fetching all contractors for the company\n  const { data: contractorList } = useContractorsListSuspense({ companyUuid: companyId })\n  const contractors = contractorList.contractors || []\n  // Locating the payment for the selectedcontractor\n  const payment = paymentGroupResponse.contractorPaymentGroup.contractorPayments?.find(\n    p => p.contractorUuid === contractorUuid,\n  )\n\n  if (!payment) {\n    throw new Error(t('errors.paymentNotFound'))\n  }\n  // Attempting to fetch the payment receipt\n  // Note: 404 is expected for receipts that aren't available (e.g., non-direct deposit or not yet funded)\n  const { data: paymentResponse } = useContractorPaymentsGetReceipt(\n    {\n      contractorPaymentUuid: payment.uuid!,\n    },\n    {\n      retry: false,\n      throwOnError: (error: Error) => {\n        // Ignore 404 errors (receipt not available), but throw other errors\n        if (error instanceof GustoEmbeddedError && error.httpMeta.response.status === 404) {\n          return false\n        }\n        return true\n      },\n    },\n  )\n  const contractor = contractors.find(c => c.uuid === contractorUuid)\n  if (!contractor) {\n    throw new Error(t('errors.contractorNotFound'))\n  }\n\n  return (\n    <PaymentStatementPresentation\n      className={className}\n      payment={payment}\n      contractor={contractor}\n      paymentReceipt={paymentResponse?.contractorPaymentReceipt}\n      checkDate={paymentGroupResponse.contractorPaymentGroup.checkDate || ''}\n    />\n  )\n}\n"],"names":["PaymentStatement","props","jsx","BaseComponent","Root","paymentGroupId","contractorUuid","dictionary","className","useComponentDictionary","t","useTranslation","paymentGroupResponse","useContractorPaymentGroupsGetSuspense","companyId","contractorList","useContractorsListSuspense","contractors","payment","p","paymentResponse","useContractorPaymentsGetReceipt","error","GustoEmbeddedError","contractor","c","PaymentStatementPresentation"],"mappings":";;;;;;;;;;AA4BO,SAASA,EAAiBC,GAA8B;AAC7D,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMG,IAAO,CAAC,EAAE,gBAAAC,GAAgB,gBAAAC,GAAgB,YAAAC,GAAY,WAAAC,QAAuC;AACjG,EAAAC,EAAuB,wCAAwCF,CAAU;AACzE,QAAM,EAAE,GAAAG,EAAA,IAAMC,EAAe,sCAAsC,GAE7D,EAAE,MAAMC,EAAA,IAAyBC,EAAsC;AAAA,IAC3E,4BAA4BR;AAAA,EAAA,CAC7B;AAED,MAAI,CAACO,EAAqB;AACxB,UAAM,IAAI,MAAMF,EAAE,6BAA6B,CAAC;AAGlD,QAAMI,IAAYF,EAAqB,uBAAuB,aAExD,EAAE,MAAMG,EAAA,IAAmBC,EAA2B,EAAE,aAAaF,GAAW,GAChFG,IAAcF,EAAe,eAAe,CAAA,GAE5CG,IAAUN,EAAqB,uBAAuB,oBAAoB;AAAA,IAC9E,CAAAO,MAAKA,EAAE,mBAAmBb;AAAA,EAAA;AAG5B,MAAI,CAACY;AACH,UAAM,IAAI,MAAMR,EAAE,wBAAwB,CAAC;AAI7C,QAAM,EAAE,MAAMU,EAAA,IAAoBC;AAAA,IAChC;AAAA,MACE,uBAAuBH,EAAQ;AAAA,IAAA;AAAA,IAEjC;AAAA,MACE,OAAO;AAAA,MACP,cAAc,CAACI,MAET,EAAAA,aAAiBC,KAAsBD,EAAM,SAAS,SAAS,WAAW;AAAA,IAIhF;AAAA,EACF,GAEIE,IAAaP,EAAY,KAAK,CAAAQ,MAAKA,EAAE,SAASnB,CAAc;AAClE,MAAI,CAACkB;AACH,UAAM,IAAI,MAAMd,EAAE,2BAA2B,CAAC;AAGhD,SACE,gBAAAR;AAAA,IAACwB;AAAA,IAAA;AAAA,MACC,WAAAlB;AAAA,MACA,SAAAU;AAAA,MACA,YAAAM;AAAA,MACA,gBAAgBJ,GAAiB;AAAA,MACjC,WAAWR,EAAqB,uBAAuB,aAAa;AAAA,IAAA;AAAA,EAAA;AAG1E;"}

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

@@ -1,27 +1,28 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useTranslation as k, Trans as T } from "react-i18next";
+import { useTranslation as T, Trans as F } from "react-i18next";
 import { useMemo as x } from "react";
 import { getContractorDisplayName as C } from "../../shared/helpers.js";
-import { getContractorPaymentTotalAmount as F } from "../shared/paymentAmounts.js";
+import { getContractorPaymentTotalAmount as A } from "../shared/paymentAmounts.js";
 import l from "./PaymentStatementPresentation.module.scss.js";
 import { Flex as m } from "../../../Common/Flex/Flex.js";
-import { useComponentContext as A } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as H } from "../../../../i18n/I18n.js";
-import { formatHoursDisplay as j } from "../../../Payroll/helpers.js";
-import y from "../../../../hooks/useNumberFormatter.js";
-import { useDateFormatter as M } from "../../../../hooks/useDateFormatter.js";
-import { addressInline as B, formatPhoneNumber as K } from "../../../../helpers/formattedStrings.js";
-import O from "../../../../assets/icons/receipt-check.svg.js";
-import { DataView as U } from "../../../Common/DataView/DataView.js";
-const te = ({
+import { useComponentContext as H } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as j } from "../../../../i18n/I18n.js";
+import { formatHoursDisplay as y } from "../../../Payroll/helpers.js";
+import M from "../../../../hooks/useNumberFormatter.js";
+import { useDateFormatter as B } from "../../../../hooks/useDateFormatter.js";
+import { addressInline as K, formatPhoneNumber as O } from "../../../../helpers/formattedStrings.js";
+import U from "../../../../assets/icons/receipt-check.svg.js";
+import { DataView as V } from "../../../Common/DataView/DataView.js";
+const oe = ({
+  className: v,
   payment: o,
   contractor: c,
-  checkDate: v,
+  checkDate: w,
   paymentReceipt: t
 }) => {
-  const h = A(), { Text: s, Heading: f, Link: w } = h;
-  H("Contractor.Payments.PaymentStatement");
-  const { t: r } = k("Contractor.Payments.PaymentStatement"), i = y("currency"), { formatLongWithYear: u } = M(), b = C(c), p = o.wageType === "Hourly", d = Number(o.hours || 0), g = Number(o.hourlyRate || 0), D = Number(o.bonus || 0), N = Number(o.reimbursement || 0), z = !!(t && o.status === "Funded" && o.paymentMethod === "Direct Deposit"), I = t?.totals?.companyDebit || "0", P = x(() => t ? [
+  const h = H(), { Text: s, Heading: f, Link: z } = h;
+  j("Contractor.Payments.PaymentStatement");
+  const { t: r } = T("Contractor.Payments.PaymentStatement"), i = M("currency"), { formatLongWithYear: u } = B(), b = C(c), p = o.wageType === "Hourly", d = Number(o.hours || 0), g = Number(o.hourlyRate || 0), D = Number(o.bonus || 0), N = Number(o.reimbursement || 0), I = !!(t && o.status === "Funded" && o.paymentMethod === "Direct Deposit"), P = t?.totals?.companyDebit || "0", S = x(() => t ? [
     {
       label: r("receipt.from"),
       value: t.nameOfSender || ""
@@ -34,17 +35,17 @@ const te = ({
       label: r("receipt.debitDate"),
       value: t.debitDate ? u(String(t.debitDate)) : ""
     }
-  ] : [], [t, c, r, u]), S = x(() => {
+  ] : [], [t, c, r, u]), L = x(() => {
     const n = [
       {
         label: o.paymentMethod || "",
-        amount: i(F(o))
+        amount: i(A(o))
       }
     ];
     return p && d > 0 ? n.push({
       label: r("hoursLabel"),
       amount: r("hoursAmount", {
-        hours: j(d),
+        hours: y(d),
         rate: i(g)
       })
     }) : n.push({
@@ -58,17 +59,17 @@ const te = ({
       amount: i(N)
     }), n;
   }, [o, p, d, g, D, N, r, i]);
-  return /* @__PURE__ */ a(m, { flexDirection: "column", gap: 32, children: [
+  return /* @__PURE__ */ a(m, { className: v, flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ e(m, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ a(m, { flexDirection: "column", gap: 8, children: [
       /* @__PURE__ */ e(f, { as: "h2", children: r("title", { contractorName: b }) }),
-      /* @__PURE__ */ e(s, { variant: "supporting", children: u(v) })
+      /* @__PURE__ */ e(s, { variant: "supporting", children: u(w) })
     ] }) }),
-    z && /* @__PURE__ */ e("div", { className: l.receiptCard, children: /* @__PURE__ */ a(m, { flexDirection: "column", gap: 24, children: [
+    I && /* @__PURE__ */ e("div", { className: l.receiptCard, children: /* @__PURE__ */ a(m, { flexDirection: "column", gap: 24, children: [
       /* @__PURE__ */ a(m, { flexDirection: "column", alignItems: "center", gap: 16, children: [
-        /* @__PURE__ */ e("div", { className: l.receiptIcon, "aria-hidden": !0, children: /* @__PURE__ */ e(O, { className: l.checkmarkIcon }) }),
+        /* @__PURE__ */ e("div", { className: l.receiptIcon, "aria-hidden": !0, children: /* @__PURE__ */ e(U, { className: l.checkmarkIcon }) }),
         /* @__PURE__ */ a(m, { flexDirection: "column", alignItems: "center", gap: 8, children: [
           /* @__PURE__ */ e(s, { size: "sm", variant: "supporting", children: r("receipt.totalLabel") }),
-          /* @__PURE__ */ e(f, { as: "h1", styledAs: "h2", className: l.totalAmount, children: i(Number(I)) })
+          /* @__PURE__ */ e(f, { as: "h1", styledAs: "h2", className: l.totalAmount, children: i(Number(P)) })
         ] })
       ] }),
       /* @__PURE__ */ e(
@@ -76,40 +77,40 @@ const te = ({
         {
           layout: "horizontal",
           showSeparators: !1,
-          items: P.map(({ label: n, value: L }) => ({
+          items: S.map(({ label: n, value: k }) => ({
             term: /* @__PURE__ */ e(s, { size: "sm", variant: "supporting", children: n }),
-            description: /* @__PURE__ */ e(s, { size: "sm", children: L })
+            description: /* @__PURE__ */ e(s, { size: "sm", children: k })
           }))
         }
       ),
       /* @__PURE__ */ e("hr", {}),
       /* @__PURE__ */ a(m, { flexDirection: "column", alignItems: "center", gap: 12, children: [
         /* @__PURE__ */ e(s, { size: "sm", variant: "supporting", className: l.disclaimer, children: /* @__PURE__ */ e(
-          T,
+          F,
           {
             i18nKey: "receipt.disclaimer",
             t: r,
             components: {
-              licensesLink: /* @__PURE__ */ e(w, { href: t?.licenseUri || "", target: "_blank" })
+              licensesLink: /* @__PURE__ */ e(z, { href: t?.licenseUri || "", target: "_blank" })
             }
           }
         ) }),
         /* @__PURE__ */ e("hr", {}),
         /* @__PURE__ */ e(s, { size: "sm", variant: "supporting", className: l.companyInfo, children: t?.licensee?.name || "" }),
         /* @__PURE__ */ a(s, { size: "sm", variant: "supporting", className: l.address, children: [
-          B({
+          K({
             street1: t?.licensee?.address || "",
             city: t?.licensee?.city || "",
             state: t?.licensee?.state || "",
             zip: t?.licensee?.postalCode || ""
           }),
           " | ",
-          K(t?.licensee?.phoneNumber)
+          O(t?.licensee?.phoneNumber)
         ] })
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      U,
+      V,
       {
         columns: [
           {
@@ -122,13 +123,13 @@ const te = ({
             render: ({ amount: n }) => n || ""
           }
         ],
-        data: S,
+        data: L,
         label: r("title", { contractorName: b })
       }
     )
   ] });
 };
 export {
-  te as PaymentStatementPresentation
+  oe as PaymentStatementPresentation
 };
 //# sourceMappingURL=PaymentStatementPresentation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentStatementPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport type { ContractorPaymentForGroup } from '@gusto/embedded-api/models/components/contractorpaymentforgroup'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { useMemo } from 'react'\nimport type { ContractorPaymentReceipt } from '@gusto/embedded-api/models/components/contractorpaymentreceipt'\nimport { getContractorDisplayName } from '../../shared/helpers'\nimport { getContractorPaymentTotalAmount } from '../shared/paymentAmounts'\nimport styles from './PaymentStatementPresentation.module.scss'\nimport { DataView, Flex } from '@/components/Common'\nimport type { DescriptionListItem } from '@/components/Common/UI/DescriptionList/DescriptionListTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { addressInline, formatPhoneNumber } from '@/helpers/formattedStrings'\nimport ReceiptCheck from '@/assets/icons/receipt-check.svg?react'\n\ninterface PaymentStatementPresentationProps {\n  payment: ContractorPaymentForGroup\n  contractor: Contractor\n  paymentReceipt?: ContractorPaymentReceipt\n  checkDate: string\n}\n\ntype PaymentStatementRow = {\n  label: string\n  amount: string | null\n}\n\n/** @internal */\nexport const PaymentStatementPresentation = ({\n  payment,\n  contractor,\n  checkDate,\n  paymentReceipt,\n}: PaymentStatementPresentationProps) => {\n  const Components = useComponentContext()\n  const { Text, Heading, Link } = Components\n  useI18n('Contractor.Payments.PaymentStatement')\n  const { t } = useTranslation('Contractor.Payments.PaymentStatement')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const contractorName = getContractorDisplayName(contractor)\n  const isHourly = payment.wageType === 'Hourly'\n  const hours = Number(payment.hours || 0)\n  const hourlyRate = Number(payment.hourlyRate || 0)\n  const bonus = Number(payment.bonus || 0)\n  const reimbursement = Number(payment.reimbursement || 0)\n\n  const shouldShowReceipt = Boolean(\n    paymentReceipt && payment.status === 'Funded' && payment.paymentMethod === 'Direct Deposit',\n  )\n\n  const receiptTotal = paymentReceipt?.totals?.companyDebit || '0'\n\n  const receiptDetailsConfig = useMemo(() => {\n    if (!paymentReceipt) return []\n\n    return [\n      {\n        label: t('receipt.from'),\n        value: paymentReceipt.nameOfSender || '',\n      },\n      {\n        label: t('receipt.to'),\n        value: getContractorDisplayName(contractor),\n      },\n      {\n        label: t('receipt.debitDate'),\n        value: paymentReceipt.debitDate ? formatLongWithYear(String(paymentReceipt.debitDate)) : '',\n      },\n    ]\n  }, [paymentReceipt, contractor, t, formatLongWithYear])\n\n  const statementRows = useMemo<PaymentStatementRow[]>(() => {\n    const rows: PaymentStatementRow[] = [\n      {\n        label: payment.paymentMethod || '',\n        amount: currencyFormatter(getContractorPaymentTotalAmount(payment)),\n      },\n    ]\n\n    if (isHourly && hours > 0) {\n      rows.push({\n        label: t('hoursLabel'),\n        amount: t('hoursAmount', {\n          hours: formatHoursDisplay(hours),\n          rate: currencyFormatter(hourlyRate),\n        }),\n      })\n    } else {\n      rows.push({\n        label: t('wageLabel'),\n        amount: currencyFormatter(Number(payment.wage || 0)),\n      })\n    }\n\n    rows.push({\n      label: t('bonus'),\n      amount: currencyFormatter(bonus),\n    })\n\n    rows.push({\n      label: t('reimbursement'),\n      amount: currencyFormatter(reimbursement),\n    })\n\n    return rows\n  }, [payment, isHourly, hours, hourlyRate, bonus, reimbursement, t, currencyFormatter])\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Heading as=\"h2\">{t('title', { contractorName })}</Heading>\n          <Text variant=\"supporting\">{formatLongWithYear(checkDate)}</Text>\n        </Flex>\n      </Flex>\n\n      {shouldShowReceipt && (\n        <div className={styles.receiptCard}>\n          <Flex flexDirection=\"column\" gap={24}>\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={16}>\n              <div className={styles.receiptIcon} aria-hidden>\n                <ReceiptCheck className={styles.checkmarkIcon} />\n              </div>\n\n              <Flex flexDirection=\"column\" alignItems=\"center\" gap={8}>\n                <Text size=\"sm\" variant=\"supporting\">\n                  {t('receipt.totalLabel')}\n                </Text>\n                <Heading as=\"h1\" styledAs=\"h2\" className={styles.totalAmount}>\n                  {currencyFormatter(Number(receiptTotal))}\n                </Heading>\n              </Flex>\n            </Flex>\n\n            <Components.DescriptionList\n              layout=\"horizontal\"\n              showSeparators={false}\n              items={receiptDetailsConfig.map(({ label, value }): DescriptionListItem => ({\n                term: (\n                  <Text size=\"sm\" variant=\"supporting\">\n                    {label}\n                  </Text>\n                ),\n                description: <Text size=\"sm\">{value}</Text>,\n              }))}\n            />\n            <hr />\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={12}>\n              <Text size=\"sm\" variant=\"supporting\" className={styles.disclaimer}>\n                <Trans\n                  i18nKey=\"receipt.disclaimer\"\n                  t={t}\n                  components={{\n                    licensesLink: <Link href={paymentReceipt?.licenseUri || ''} target=\"_blank\" />,\n                  }}\n                />\n              </Text>\n              <hr />\n\n              <Text size=\"sm\" variant=\"supporting\" className={styles.companyInfo}>\n                {paymentReceipt?.licensee?.name || ''}\n              </Text>\n              <Text size=\"sm\" variant=\"supporting\" className={styles.address}>\n                {addressInline({\n                  street1: paymentReceipt?.licensee?.address || '',\n                  city: paymentReceipt?.licensee?.city || '',\n                  state: paymentReceipt?.licensee?.state || '',\n                  zip: paymentReceipt?.licensee?.postalCode || '',\n                  country: '',\n                  uuid: '',\n                })}\n                {' | '}\n                {formatPhoneNumber(paymentReceipt?.licensee?.phoneNumber)}\n              </Text>\n            </Flex>\n          </Flex>\n        </div>\n      )}\n\n      <DataView\n        columns={[\n          {\n            title: t('debitedColumn'),\n            render: ({ label }) => label,\n          },\n          {\n            title: t('amountColumn'),\n            justify: 'end',\n            render: ({ amount }) => amount || '',\n          },\n        ]}\n        data={statementRows}\n        label={t('title', { contractorName })}\n      />\n    </Flex>\n  )\n}\n"],"names":["PaymentStatementPresentation","payment","contractor","checkDate","paymentReceipt","Components","useComponentContext","Text","Heading","Link","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","contractorName","getContractorDisplayName","isHourly","hours","hourlyRate","bonus","reimbursement","shouldShowReceipt","receiptTotal","receiptDetailsConfig","useMemo","statementRows","rows","getContractorPaymentTotalAmount","formatHoursDisplay","jsxs","Flex","jsx","styles","ReceiptCheck","label","value","Trans","addressInline","formatPhoneNumber","DataView","amount"],"mappings":";;;;;;;;;;;;;;;AA+BO,MAAMA,KAA+B,CAAC;AAAA,EAC3C,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AACF,MAAyC;AACvC,QAAMC,IAAaC,EAAA,GACb,EAAE,MAAAC,GAAM,SAAAC,GAAS,MAAAC,EAAA,IAASJ;AAChC,EAAAK,EAAQ,sCAAsC;AAC9C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,sCAAsC,GAC7DC,IAAoBC,EAAmB,UAAU,GACjD,EAAE,oBAAAC,EAAA,IAAuBC,EAAA,GAEzBC,IAAiBC,EAAyBhB,CAAU,GACpDiB,IAAWlB,EAAQ,aAAa,UAChCmB,IAAQ,OAAOnB,EAAQ,SAAS,CAAC,GACjCoB,IAAa,OAAOpB,EAAQ,cAAc,CAAC,GAC3CqB,IAAQ,OAAOrB,EAAQ,SAAS,CAAC,GACjCsB,IAAgB,OAAOtB,EAAQ,iBAAiB,CAAC,GAEjDuB,IAAoB,GACxBpB,KAAkBH,EAAQ,WAAW,YAAYA,EAAQ,kBAAkB,mBAGvEwB,IAAerB,GAAgB,QAAQ,gBAAgB,KAEvDsB,IAAuBC,EAAQ,MAC9BvB,IAEE;AAAA,IACL;AAAA,MACE,OAAOO,EAAE,cAAc;AAAA,MACvB,OAAOP,EAAe,gBAAgB;AAAA,IAAA;AAAA,IAExC;AAAA,MACE,OAAOO,EAAE,YAAY;AAAA,MACrB,OAAOO,EAAyBhB,CAAU;AAAA,IAAA;AAAA,IAE5C;AAAA,MACE,OAAOS,EAAE,mBAAmB;AAAA,MAC5B,OAAOP,EAAe,YAAYW,EAAmB,OAAOX,EAAe,SAAS,CAAC,IAAI;AAAA,IAAA;AAAA,EAC3F,IAd0B,CAAA,GAgB3B,CAACA,GAAgBF,GAAYS,GAAGI,CAAkB,CAAC,GAEhDa,IAAgBD,EAA+B,MAAM;AACzD,UAAME,IAA8B;AAAA,MAClC;AAAA,QACE,OAAO5B,EAAQ,iBAAiB;AAAA,QAChC,QAAQY,EAAkBiB,EAAgC7B,CAAO,CAAC;AAAA,MAAA;AAAA,IACpE;AAGF,WAAIkB,KAAYC,IAAQ,IACtBS,EAAK,KAAK;AAAA,MACR,OAAOlB,EAAE,YAAY;AAAA,MACrB,QAAQA,EAAE,eAAe;AAAA,QACvB,OAAOoB,EAAmBX,CAAK;AAAA,QAC/B,MAAMP,EAAkBQ,CAAU;AAAA,MAAA,CACnC;AAAA,IAAA,CACF,IAEDQ,EAAK,KAAK;AAAA,MACR,OAAOlB,EAAE,WAAW;AAAA,MACpB,QAAQE,EAAkB,OAAOZ,EAAQ,QAAQ,CAAC,CAAC;AAAA,IAAA,CACpD,GAGH4B,EAAK,KAAK;AAAA,MACR,OAAOlB,EAAE,OAAO;AAAA,MAChB,QAAQE,EAAkBS,CAAK;AAAA,IAAA,CAChC,GAEDO,EAAK,KAAK;AAAA,MACR,OAAOlB,EAAE,eAAe;AAAA,MACxB,QAAQE,EAAkBU,CAAa;AAAA,IAAA,CACxC,GAEMM;AAAA,EACT,GAAG,CAAC5B,GAASkB,GAAUC,GAAOC,GAAYC,GAAOC,GAAeZ,GAAGE,CAAiB,CAAC;AAErF,SACE,gBAAAmB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAC,EAACD,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,4BAACA,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAC,EAAC1B,GAAA,EAAQ,IAAG,MAAM,UAAAG,EAAE,SAAS,EAAE,gBAAAM,EAAA,CAAgB,GAAE;AAAA,wBAChDV,GAAA,EAAK,SAAQ,cAAc,UAAAQ,EAAmBZ,CAAS,EAAA,CAAE;AAAA,IAAA,EAAA,CAC5D,EAAA,CACF;AAAA,IAECqB,KACC,gBAAAU,EAAC,OAAA,EAAI,WAAWC,EAAO,aACrB,UAAA,gBAAAH,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,MAAA,gBAAAD,EAACC,KAAK,eAAc,UAAS,YAAW,UAAS,KAAK,IACpD,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,aAAa,eAAW,IAC7C,UAAA,gBAAAD,EAACE,GAAA,EAAa,WAAWD,EAAO,cAAA,CAAe,GACjD;AAAA,0BAECF,GAAA,EAAK,eAAc,UAAS,YAAW,UAAS,KAAK,GACpD,UAAA;AAAA,UAAA,gBAAAC,EAAC3B,KAAK,MAAK,MAAK,SAAQ,cACrB,UAAAI,EAAE,oBAAoB,GACzB;AAAA,UACA,gBAAAuB,EAAC1B,GAAA,EAAQ,IAAG,MAAK,UAAS,MAAK,WAAW2B,EAAO,aAC9C,UAAAtB,EAAkB,OAAOY,CAAY,CAAC,EAAA,CACzC;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,GACF;AAAA,MAEA,gBAAAS;AAAA,QAAC7B,EAAW;AAAA,QAAX;AAAA,UACC,QAAO;AAAA,UACP,gBAAgB;AAAA,UAChB,OAAOqB,EAAqB,IAAI,CAAC,EAAE,OAAAW,GAAO,OAAAC,SAAkC;AAAA,YAC1E,MACE,gBAAAJ,EAAC3B,GAAA,EAAK,MAAK,MAAK,SAAQ,cACrB,UAAA8B,GACH;AAAA,YAEF,aAAa,gBAAAH,EAAC3B,GAAA,EAAK,MAAK,MAAM,UAAA+B,EAAA,CAAM;AAAA,UAAA,EACpC;AAAA,QAAA;AAAA,MAAA;AAAA,wBAEH,MAAA,EAAG;AAAA,wBACHL,GAAA,EAAK,eAAc,UAAS,YAAW,UAAS,KAAK,IACpD,UAAA;AAAA,QAAA,gBAAAC,EAAC3B,KAAK,MAAK,MAAK,SAAQ,cAAa,WAAW4B,EAAO,YACrD,UAAA,gBAAAD;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,GAAA5B;AAAA,YACA,YAAY;AAAA,cACV,gCAAeF,GAAA,EAAK,MAAML,GAAgB,cAAc,IAAI,QAAO,SAAA,CAAS;AAAA,YAAA;AAAA,UAC9E;AAAA,QAAA,GAEJ;AAAA,0BACC,MAAA,EAAG;AAAA,QAEJ,gBAAA8B,EAAC3B,GAAA,EAAK,MAAK,MAAK,SAAQ,cAAa,WAAW4B,EAAO,aACpD,UAAA/B,GAAgB,UAAU,QAAQ,IACrC;AAAA,QACA,gBAAA4B,EAACzB,KAAK,MAAK,MAAK,SAAQ,cAAa,WAAW4B,EAAO,SACpD,UAAA;AAAA,UAAAK,EAAc;AAAA,YACb,SAASpC,GAAgB,UAAU,WAAW;AAAA,YAC9C,MAAMA,GAAgB,UAAU,QAAQ;AAAA,YACxC,OAAOA,GAAgB,UAAU,SAAS;AAAA,YAC1C,KAAKA,GAAgB,UAAU,cAAc;AAAA,UAG/C,CAAC;AAAA,UACA;AAAA,UACAqC,EAAkBrC,GAAgB,UAAU,WAAW;AAAA,QAAA,EAAA,CAC1D;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IAGF,gBAAA8B;AAAA,MAACQ;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP;AAAA,YACE,OAAO/B,EAAE,eAAe;AAAA,YACxB,QAAQ,CAAC,EAAE,OAAA0B,QAAYA;AAAA,UAAA;AAAA,UAEzB;AAAA,YACE,OAAO1B,EAAE,cAAc;AAAA,YACvB,SAAS;AAAA,YACT,QAAQ,CAAC,EAAE,QAAAgC,EAAA,MAAaA,KAAU;AAAA,UAAA;AAAA,QACpC;AAAA,QAEF,MAAMf;AAAA,QACN,OAAOjB,EAAE,SAAS,EAAE,gBAAAM,GAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EACtC,GACF;AAEJ;"}
+{"version":3,"file":"PaymentStatementPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport type { ContractorPaymentForGroup } from '@gusto/embedded-api/models/components/contractorpaymentforgroup'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { useMemo } from 'react'\nimport type { ContractorPaymentReceipt } from '@gusto/embedded-api/models/components/contractorpaymentreceipt'\nimport { getContractorDisplayName } from '../../shared/helpers'\nimport { getContractorPaymentTotalAmount } from '../shared/paymentAmounts'\nimport styles from './PaymentStatementPresentation.module.scss'\nimport { DataView, Flex } from '@/components/Common'\nimport type { DescriptionListItem } from '@/components/Common/UI/DescriptionList/DescriptionListTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { addressInline, formatPhoneNumber } from '@/helpers/formattedStrings'\nimport ReceiptCheck from '@/assets/icons/receipt-check.svg?react'\n\ninterface PaymentStatementPresentationProps {\n  /** CSS class name applied to the root element. */\n  className?: string\n  payment: ContractorPaymentForGroup\n  contractor: Contractor\n  paymentReceipt?: ContractorPaymentReceipt\n  checkDate: string\n}\n\ntype PaymentStatementRow = {\n  label: string\n  amount: string | null\n}\n\n/** @internal */\nexport const PaymentStatementPresentation = ({\n  className,\n  payment,\n  contractor,\n  checkDate,\n  paymentReceipt,\n}: PaymentStatementPresentationProps) => {\n  const Components = useComponentContext()\n  const { Text, Heading, Link } = Components\n  useI18n('Contractor.Payments.PaymentStatement')\n  const { t } = useTranslation('Contractor.Payments.PaymentStatement')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const contractorName = getContractorDisplayName(contractor)\n  const isHourly = payment.wageType === 'Hourly'\n  const hours = Number(payment.hours || 0)\n  const hourlyRate = Number(payment.hourlyRate || 0)\n  const bonus = Number(payment.bonus || 0)\n  const reimbursement = Number(payment.reimbursement || 0)\n\n  const shouldShowReceipt = Boolean(\n    paymentReceipt && payment.status === 'Funded' && payment.paymentMethod === 'Direct Deposit',\n  )\n\n  const receiptTotal = paymentReceipt?.totals?.companyDebit || '0'\n\n  const receiptDetailsConfig = useMemo(() => {\n    if (!paymentReceipt) return []\n\n    return [\n      {\n        label: t('receipt.from'),\n        value: paymentReceipt.nameOfSender || '',\n      },\n      {\n        label: t('receipt.to'),\n        value: getContractorDisplayName(contractor),\n      },\n      {\n        label: t('receipt.debitDate'),\n        value: paymentReceipt.debitDate ? formatLongWithYear(String(paymentReceipt.debitDate)) : '',\n      },\n    ]\n  }, [paymentReceipt, contractor, t, formatLongWithYear])\n\n  const statementRows = useMemo<PaymentStatementRow[]>(() => {\n    const rows: PaymentStatementRow[] = [\n      {\n        label: payment.paymentMethod || '',\n        amount: currencyFormatter(getContractorPaymentTotalAmount(payment)),\n      },\n    ]\n\n    if (isHourly && hours > 0) {\n      rows.push({\n        label: t('hoursLabel'),\n        amount: t('hoursAmount', {\n          hours: formatHoursDisplay(hours),\n          rate: currencyFormatter(hourlyRate),\n        }),\n      })\n    } else {\n      rows.push({\n        label: t('wageLabel'),\n        amount: currencyFormatter(Number(payment.wage || 0)),\n      })\n    }\n\n    rows.push({\n      label: t('bonus'),\n      amount: currencyFormatter(bonus),\n    })\n\n    rows.push({\n      label: t('reimbursement'),\n      amount: currencyFormatter(reimbursement),\n    })\n\n    return rows\n  }, [payment, isHourly, hours, hourlyRate, bonus, reimbursement, t, currencyFormatter])\n\n  return (\n    <Flex className={className} flexDirection=\"column\" gap={32}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Heading as=\"h2\">{t('title', { contractorName })}</Heading>\n          <Text variant=\"supporting\">{formatLongWithYear(checkDate)}</Text>\n        </Flex>\n      </Flex>\n\n      {shouldShowReceipt && (\n        <div className={styles.receiptCard}>\n          <Flex flexDirection=\"column\" gap={24}>\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={16}>\n              <div className={styles.receiptIcon} aria-hidden>\n                <ReceiptCheck className={styles.checkmarkIcon} />\n              </div>\n\n              <Flex flexDirection=\"column\" alignItems=\"center\" gap={8}>\n                <Text size=\"sm\" variant=\"supporting\">\n                  {t('receipt.totalLabel')}\n                </Text>\n                <Heading as=\"h1\" styledAs=\"h2\" className={styles.totalAmount}>\n                  {currencyFormatter(Number(receiptTotal))}\n                </Heading>\n              </Flex>\n            </Flex>\n\n            <Components.DescriptionList\n              layout=\"horizontal\"\n              showSeparators={false}\n              items={receiptDetailsConfig.map(({ label, value }): DescriptionListItem => ({\n                term: (\n                  <Text size=\"sm\" variant=\"supporting\">\n                    {label}\n                  </Text>\n                ),\n                description: <Text size=\"sm\">{value}</Text>,\n              }))}\n            />\n            <hr />\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={12}>\n              <Text size=\"sm\" variant=\"supporting\" className={styles.disclaimer}>\n                <Trans\n                  i18nKey=\"receipt.disclaimer\"\n                  t={t}\n                  components={{\n                    licensesLink: <Link href={paymentReceipt?.licenseUri || ''} target=\"_blank\" />,\n                  }}\n                />\n              </Text>\n              <hr />\n\n              <Text size=\"sm\" variant=\"supporting\" className={styles.companyInfo}>\n                {paymentReceipt?.licensee?.name || ''}\n              </Text>\n              <Text size=\"sm\" variant=\"supporting\" className={styles.address}>\n                {addressInline({\n                  street1: paymentReceipt?.licensee?.address || '',\n                  city: paymentReceipt?.licensee?.city || '',\n                  state: paymentReceipt?.licensee?.state || '',\n                  zip: paymentReceipt?.licensee?.postalCode || '',\n                  country: '',\n                  uuid: '',\n                })}\n                {' | '}\n                {formatPhoneNumber(paymentReceipt?.licensee?.phoneNumber)}\n              </Text>\n            </Flex>\n          </Flex>\n        </div>\n      )}\n\n      <DataView\n        columns={[\n          {\n            title: t('debitedColumn'),\n            render: ({ label }) => label,\n          },\n          {\n            title: t('amountColumn'),\n            justify: 'end',\n            render: ({ amount }) => amount || '',\n          },\n        ]}\n        data={statementRows}\n        label={t('title', { contractorName })}\n      />\n    </Flex>\n  )\n}\n"],"names":["PaymentStatementPresentation","className","payment","contractor","checkDate","paymentReceipt","Components","useComponentContext","Text","Heading","Link","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","contractorName","getContractorDisplayName","isHourly","hours","hourlyRate","bonus","reimbursement","shouldShowReceipt","receiptTotal","receiptDetailsConfig","useMemo","statementRows","rows","getContractorPaymentTotalAmount","formatHoursDisplay","Flex","jsx","styles","jsxs","ReceiptCheck","label","value","Trans","addressInline","formatPhoneNumber","DataView","amount"],"mappings":"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"}