@gusto/embedded-react-sdk 0.48.3 → 0.49.0

package/dist/components/Contractor/Payments/CreatePayment/PreviewPresentation.js

@@ -1,58 +1,58 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import { useTranslation as C } from "react-i18next";
-import { useMemo as v } from "react";
-import { getContractorDisplayName as R } from "./helpers.js";
-import { FastAchSubmissionBlockerBanner as L } from "./FastAchSubmissionBlockerBanner.js";
-import { GenericBlocker as P } from "./GenericBlocker.js";
-import { Flex as l } from "../../../Common/Flex/Flex.js";
-import { useComponentContext as _ } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as E } from "../../../../i18n/I18n.js";
-import { formatHoursDisplay as F } from "../../../Payroll/helpers.js";
-import j from "../../../../hooks/useNumberFormatter.js";
-import { PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES as T } from "../../../../shared/constants.js";
-import { DataView as p } from "../../../Common/DataView/DataView.js";
+import { useMemo as j } from "react";
+import { getContractorDisplayName as v } from "./helpers.js";
+import { FastAchSubmissionBlockerBanner as P } from "./FastAchSubmissionBlockerBanner.js";
+import { GenericBlocker as R } from "./GenericBlocker.js";
+import { Flex as u } from "../../../Common/Flex/Flex.js";
+import { useComponentContext as L } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as _ } from "../../../../i18n/I18n.js";
+import { formatHoursDisplay as E } from "../../../Payroll/helpers.js";
+import F from "../../../../hooks/useNumberFormatter.js";
+import { PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES as f } from "../../../../shared/constants.js";
+import { DataView as T } from "../../../Common/DataView/DataView.js";
 const I = "0.000", X = ({
-  contractorPaymentGroup: a,
-  contractors: f,
+  contractorPaymentGroup: n,
+  contractors: p,
   onBackToEdit: h,
   onSubmit: A,
-  isLoading: u,
-  bankAccount: g,
+  isLoading: l,
+  bankAccount: D,
   selectedUnblockOptions: d = {},
   onUnblockOptionChange: b,
-  paymentSpeed: D
+  paymentSpeed: g
 }) => {
-  const { Button: c, Text: w, Heading: y, Alert: H } = _();
-  E("Contractor.Payments.CreatePayment");
+  const { Button: c, Text: w, Heading: y, Alert: H } = L();
+  _("Contractor.Payments.CreatePayment");
   const { t } = C("Contractor.Payments.CreatePayment", {
     keyPrefix: "previewPresentation"
-  }), n = j(), N = (e) => e.wageType === "Hourly" && e.hourlyRate ? `${t("wageTypes.hourly")} ${n(Number(e.hourlyRate || "0"))}${t("perHour")}` : e.wageType, m = v(
-    () => a.contractorPayments?.reduce(
+  }), a = F(), N = (e) => e.wageType === "Hourly" && e.hourlyRate ? `${a(Number(e.hourlyRate || "0"))}${t("perHour")}` : e.wageType, i = j(
+    () => n.contractorPayments?.reduce(
       (e, r) => (e.wageAmount += Number(r.wage || "0"), e.bonusAmount += Number(r.bonus || "0"), e.reimbursementAmount += Number(r.reimbursement || "0"), e.totalAmount += Number(r.wageTotal || "0"), e),
       { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 }
     ),
-    [a.contractorPayments]
-  ), B = a.contractorPayments || [], s = (a.submissionBlockers || []).filter(
+    [n.contractorPayments]
+  ), B = n.contractorPayments || [], s = (n.submissionBlockers || []).filter(
     (e) => e.status === "unresolved"
   ), S = s.some(
-    (e) => !T.includes(e.blockerType || "")
+    (e) => !f.includes(e.blockerType || "")
   ), k = s.some(
     (e) => !d[e.blockerType || ""]
-  ), x = u || s.length > 0 && (S || k);
-  return /* @__PURE__ */ i(l, { flexDirection: "column", gap: 32, children: [
-    /* @__PURE__ */ i(l, { justifyContent: "flex-end", gap: 16, children: [
-      /* @__PURE__ */ i(l, { flexDirection: "column", gap: 2, children: [
+  ), x = l || s.length > 0 && (S || k);
+  return /* @__PURE__ */ m(u, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ m(u, { justifyContent: "flex-end", gap: 16, children: [
+      /* @__PURE__ */ m(u, { flexDirection: "column", gap: 2, children: [
         /* @__PURE__ */ o(y, { as: "h2", children: t("reviewAndSubmitTitle") }),
-        /* @__PURE__ */ o(w, { variant: "supporting", children: t("reviewSubtitle", { debitDate: a.debitDate }) })
+        /* @__PURE__ */ o(w, { variant: "supporting", children: t("reviewSubtitle", { debitDate: n.debitDate }) })
       ] }),
-      /* @__PURE__ */ i(l, { justifyContent: "flex-end", gap: 16, children: [
+      /* @__PURE__ */ m(u, { justifyContent: "flex-end", gap: 16, children: [
         /* @__PURE__ */ o(c, { onClick: h, variant: "secondary", children: t("editButton") }),
         /* @__PURE__ */ o(
           c,
           {
             onClick: A,
             variant: "primary",
-            isLoading: u,
+            isLoading: l,
             isDisabled: x,
             children: t("submitButton")
           }
@@ -64,62 +64,62 @@ const I = "0.000", X = ({
       {
         status: "info",
         label: t("alerts.submitPaymentsDeadline", {
-          checkDate: a.checkDate,
-          debitDate: a.debitDate
+          checkDate: n.checkDate,
+          debitDate: n.debitDate
         })
       }
     ),
     s.length > 0 && b && s.map((e) => {
       const r = e.blockerType || "";
-      return T.includes(r) ? /* @__PURE__ */ o(
-        L,
+      return f.includes(r) ? /* @__PURE__ */ o(
+        P,
         {
           blocker: e,
           selectedValue: d[r],
           onUnblockOptionChange: b,
-          paymentSpeed: D
+          paymentSpeed: g
         },
         r
-      ) : /* @__PURE__ */ o(P, { blocker: e }, r);
+      ) : /* @__PURE__ */ o(R, { blocker: e }, r);
     }),
     /* @__PURE__ */ o(y, { as: "h3", children: t("paymentSummaryTitle") }),
     /* @__PURE__ */ o(
-      p,
+      T,
       {
         columns: [
           {
             title: t("summaryTableHeaders.totalAmount"),
-            render: () => n(Number(a.totals?.amount || "0"))
+            render: () => a(Number(n.totals?.amount || "0"))
           },
           {
             title: t("summaryTableHeaders.debitAmount"),
-            render: () => n(Number(a.totals?.debitAmount || "0"))
+            render: () => a(Number(n.totals?.debitAmount || "0"))
           },
           {
             title: t("summaryTableHeaders.debitAccount"),
-            render: () => g?.hiddenAccountNumber ?? t("naDebitAccount")
+            render: () => D?.hiddenAccountNumber ?? t("naDebitAccount")
           },
           {
             title: t("summaryTableHeaders.debitDate"),
-            render: () => a.debitDate || "debitDate"
+            render: () => n.debitDate || "debitDate"
           },
           {
             title: t("summaryTableHeaders.contractorPayDate"),
-            render: () => a.checkDate || "contractorPayDate"
+            render: () => n.checkDate || "contractorPayDate"
           }
         ],
-        data: [a],
+        data: [n],
         label: "Payment Summary"
       }
     ),
     /* @__PURE__ */ o(
-      p,
+      T,
       {
         columns: [
           {
             title: t("contractorTableHeaders.contractor"),
-            render: (e) => R(
-              f.find(
+            render: (e) => v(
+              p.find(
                 (r) => r.uuid === e.contractorUuid
               )
             )
@@ -134,35 +134,41 @@ const I = "0.000", X = ({
           },
           {
             title: t("contractorTableHeaders.hours"),
+            justify: "end",
             render: (e) => {
+              if (e.wageType === "Fixed") return t("na");
               const r = Number(e.hours || "0");
-              return e.wageType === "Hourly" && r ? F(r) : I;
+              return r ? E(r) : I;
             }
           },
           {
             title: t("contractorTableHeaders.wage"),
-            render: (e) => e.wageType === "Fixed" && e.wage ? n(Number(e.wage || "0")) : n(0)
+            justify: "end",
+            render: (e) => e.wageType === "Hourly" ? t("na") : a(Number(e.wage || "0"))
           },
           {
             title: t("contractorTableHeaders.bonus"),
-            render: (e) => n(Number(e.bonus || "0"))
+            justify: "end",
+            render: (e) => a(Number(e.bonus || "0"))
           },
           {
             title: t("contractorTableHeaders.reimbursement"),
-            render: (e) => n(Number(e.reimbursement || "0"))
+            justify: "end",
+            render: (e) => a(Number(e.reimbursement || "0"))
           },
           {
             title: t("contractorTableHeaders.total"),
-            render: (e) => n(Number(e.wageTotal || "0"))
+            justify: "end",
+            render: (e) => a(Number(e.wageTotal || "0"))
           }
         ],
         data: B,
         footer: () => ({
           "column-0": t("totalsLabel"),
-          "column-4": n(m?.wageAmount ?? 0),
-          "column-5": n(m?.bonusAmount ?? 0),
-          "column-6": n(m?.reimbursementAmount ?? 0),
-          "column-7": n(m?.totalAmount ?? 0)
+          "column-4": a(i?.wageAmount ?? 0),
+          "column-5": a(i?.bonusAmount ?? 0),
+          "column-6": a(i?.reimbursementAmount ?? 0),
+          "column-7": a(i?.totalAmount ?? 0)
         }),
         label: t("whatYourCompanyPays")
       }

package/dist/components/Contractor/Payments/CreatePayment/PreviewPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/PreviewPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupPreview } from '@gusto/embedded-api-v-2025-11-15/models/components/contractorpaymentgrouppreview'\nimport type { ContractorPaymentForGroupPreview } from '@gusto/embedded-api-v-2025-11-15/models/components/contractorpaymentforgrouppreview'\nimport { useMemo } from 'react'\nimport type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'\nimport type { CompanyBankAccount } from '@gusto/embedded-api-v-2025-11-15/models/components/companybankaccount'\nimport type { PaymentSpeed } from '@gusto/embedded-api-v-2025-11-15/models/components/paymentconfigs'\nimport { getContractorDisplayName } from './helpers'\nimport { FastAchSubmissionBlockerBanner } from './FastAchSubmissionBlockerBanner'\nimport { GenericBlocker } from './GenericBlocker'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES } from '@/shared/constants'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface PreviewPresentationProps {\n  contractorPaymentGroup: ContractorPaymentGroupPreview\n  contractors: Contractor[]\n  onBackToEdit: () => void\n  onSubmit: () => void\n  isLoading: boolean\n  bankAccount?: CompanyBankAccount\n  selectedUnblockOptions?: Record<string, string>\n  onUnblockOptionChange?: (blockerType: string, value: string) => void\n  paymentSpeed?: PaymentSpeed\n}\n\n/** @internal */\nexport const PreviewPresentation = ({\n  contractorPaymentGroup,\n  contractors,\n  onBackToEdit,\n  onSubmit,\n  isLoading,\n  bankAccount,\n  selectedUnblockOptions = {},\n  onUnblockOptionChange,\n  paymentSpeed,\n}: PreviewPresentationProps) => {\n  const { Button, Text, Heading, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment', {\n    keyPrefix: 'previewPresentation',\n  })\n  const currencyFormatter = useNumberFormatter()\n\n  const formatWageType = (contractor: ContractorPaymentForGroupPreview) => {\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `${t('wageTypes.hourly')} ${currencyFormatter(Number(contractor.hourlyRate || '0'))}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  const totals = useMemo(\n    () =>\n      contractorPaymentGroup.contractorPayments?.reduce(\n        (acc, contractor) => {\n          acc.wageAmount += Number(contractor.wage || '0')\n          acc.bonusAmount += Number(contractor.bonus || '0')\n          acc.reimbursementAmount += Number(contractor.reimbursement || '0')\n          acc.totalAmount += Number(contractor.wageTotal || '0')\n          return acc\n        },\n        { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 },\n      ),\n    [contractorPaymentGroup.contractorPayments],\n  )\n\n  const contractorPayments = contractorPaymentGroup.contractorPayments || []\n\n  const submissionBlockers = (contractorPaymentGroup.submissionBlockers || []).filter(\n    blocker => blocker.status === 'unresolved',\n  )\n\n  const hasUnresolvableBlockers = submissionBlockers.some(\n    blocker => !PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(blocker.blockerType || ''),\n  )\n\n  const hasUnselectedBlockers = submissionBlockers.some(\n    blocker => !selectedUnblockOptions[blocker.blockerType || ''],\n  )\n\n  const isSubmitDisabled =\n    isLoading ||\n    (submissionBlockers.length > 0 && (hasUnresolvableBlockers || hasUnselectedBlockers))\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Flex flexDirection=\"column\" gap={2}>\n          <Heading as=\"h2\">{t('reviewAndSubmitTitle')}</Heading>\n          <Text variant=\"supporting\">\n            {t('reviewSubtitle', { debitDate: contractorPaymentGroup.debitDate })}\n          </Text>\n        </Flex>\n        <Flex justifyContent=\"flex-end\" gap={16}>\n          <Button onClick={onBackToEdit} variant=\"secondary\">\n            {t('editButton')}\n          </Button>\n          <Button\n            onClick={onSubmit}\n            variant=\"primary\"\n            isLoading={isLoading}\n            isDisabled={isSubmitDisabled}\n          >\n            {t('submitButton')}\n          </Button>\n        </Flex>\n      </Flex>\n\n      <Alert\n        status=\"info\"\n        label={t('alerts.submitPaymentsDeadline', {\n          checkDate: contractorPaymentGroup.checkDate,\n          debitDate: contractorPaymentGroup.debitDate,\n        })}\n      />\n\n      {submissionBlockers.length > 0 &&\n        onUnblockOptionChange &&\n        submissionBlockers.map(blocker => {\n          const blockerType = blocker.blockerType || ''\n\n          if (PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(blockerType)) {\n            return (\n              <FastAchSubmissionBlockerBanner\n                key={blockerType}\n                blocker={blocker}\n                selectedValue={selectedUnblockOptions[blockerType]}\n                onUnblockOptionChange={onUnblockOptionChange}\n                paymentSpeed={paymentSpeed}\n              />\n            )\n          }\n\n          return <GenericBlocker key={blockerType} blocker={blocker} />\n        })}\n\n      {/* Payment Summary */}\n      <Heading as=\"h3\">{t('paymentSummaryTitle')}</Heading>\n      <DataView\n        columns={[\n          {\n            title: t('summaryTableHeaders.totalAmount'),\n            render: () => currencyFormatter(Number(contractorPaymentGroup.totals?.amount || '0')),\n          },\n          {\n            title: t('summaryTableHeaders.debitAmount'),\n            render: () =>\n              currencyFormatter(Number(contractorPaymentGroup.totals?.debitAmount || '0')),\n          },\n          {\n            title: t('summaryTableHeaders.debitAccount'),\n            render: () => bankAccount?.hiddenAccountNumber ?? t('naDebitAccount'),\n          },\n          {\n            title: t('summaryTableHeaders.debitDate'),\n            render: () => contractorPaymentGroup.debitDate || 'debitDate',\n          },\n          {\n            title: t('summaryTableHeaders.contractorPayDate'),\n            render: () => contractorPaymentGroup.checkDate || 'contractorPayDate',\n          },\n        ]}\n        data={[contractorPaymentGroup]}\n        label=\"Payment Summary\"\n      />\n\n      {/* Contractor Payments Table */}\n      <DataView\n        columns={[\n          {\n            title: t('contractorTableHeaders.contractor'),\n            render: contractorPayment =>\n              getContractorDisplayName(\n                contractors.find(\n                  contractor => contractor.uuid === contractorPayment.contractorUuid,\n                ),\n              ),\n          },\n          {\n            title: t('contractorTableHeaders.wageType'),\n            render: contractorPayment => formatWageType(contractorPayment),\n          },\n          {\n            title: t('contractorTableHeaders.paymentMethod'),\n            render: contractorPayment => contractorPayment.paymentMethod || 'N/A',\n          },\n          {\n            title: t('contractorTableHeaders.hours'),\n            render: contractorPayment => {\n              const hours = Number(contractorPayment.hours || '0')\n              return contractorPayment.wageType === 'Hourly' && hours\n                ? formatHoursDisplay(hours)\n                : ZERO_HOURS_DISPLAY\n            },\n          },\n          {\n            title: t('contractorTableHeaders.wage'),\n            render: contractorPayment =>\n              contractorPayment.wageType === 'Fixed' && contractorPayment.wage\n                ? currencyFormatter(Number(contractorPayment.wage || '0'))\n                : currencyFormatter(0),\n          },\n          {\n            title: t('contractorTableHeaders.bonus'),\n            render: contractorPayment => currencyFormatter(Number(contractorPayment.bonus || '0')),\n          },\n          {\n            title: t('contractorTableHeaders.reimbursement'),\n            render: contractorPayment =>\n              currencyFormatter(Number(contractorPayment.reimbursement || '0')),\n          },\n          {\n            title: t('contractorTableHeaders.total'),\n            render: contractorPayment =>\n              currencyFormatter(Number(contractorPayment.wageTotal || '0')),\n          },\n        ]}\n        data={contractorPayments}\n        footer={() => ({\n          'column-0': t('totalsLabel'),\n          'column-4': currencyFormatter(totals?.wageAmount ?? 0),\n          'column-5': currencyFormatter(totals?.bonusAmount ?? 0),\n          'column-6': currencyFormatter(totals?.reimbursementAmount ?? 0),\n          'column-7': currencyFormatter(totals?.totalAmount ?? 0),\n        })}\n        label={t('whatYourCompanyPays')}\n      />\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","PreviewPresentation","contractorPaymentGroup","contractors","onBackToEdit","onSubmit","isLoading","bankAccount","selectedUnblockOptions","onUnblockOptionChange","paymentSpeed","Button","Text","Heading","Alert","useComponentContext","useI18n","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","totals","useMemo","acc","contractorPayments","submissionBlockers","blocker","hasUnresolvableBlockers","PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES","hasUnselectedBlockers","isSubmitDisabled","jsxs","Flex","jsx","blockerType","FastAchSubmissionBlockerBanner","GenericBlocker","DataView","contractorPayment","getContractorDisplayName","hours","formatHoursDisplay"],"mappings":"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"}
+{"version":3,"file":"PreviewPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/PreviewPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupPreview } from '@gusto/embedded-api-v-2025-11-15/models/components/contractorpaymentgrouppreview'\nimport type { ContractorPaymentForGroupPreview } from '@gusto/embedded-api-v-2025-11-15/models/components/contractorpaymentforgrouppreview'\nimport { useMemo } from 'react'\nimport type { Contractor } from '@gusto/embedded-api-v-2025-11-15/models/components/contractor'\nimport type { CompanyBankAccount } from '@gusto/embedded-api-v-2025-11-15/models/components/companybankaccount'\nimport type { PaymentSpeed } from '@gusto/embedded-api-v-2025-11-15/models/components/paymentconfigs'\nimport { getContractorDisplayName } from './helpers'\nimport { FastAchSubmissionBlockerBanner } from './FastAchSubmissionBlockerBanner'\nimport { GenericBlocker } from './GenericBlocker'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES } from '@/shared/constants'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface PreviewPresentationProps {\n  contractorPaymentGroup: ContractorPaymentGroupPreview\n  contractors: Contractor[]\n  onBackToEdit: () => void\n  onSubmit: () => void\n  isLoading: boolean\n  bankAccount?: CompanyBankAccount\n  selectedUnblockOptions?: Record<string, string>\n  onUnblockOptionChange?: (blockerType: string, value: string) => void\n  paymentSpeed?: PaymentSpeed\n}\n\n/** @internal */\nexport const PreviewPresentation = ({\n  contractorPaymentGroup,\n  contractors,\n  onBackToEdit,\n  onSubmit,\n  isLoading,\n  bankAccount,\n  selectedUnblockOptions = {},\n  onUnblockOptionChange,\n  paymentSpeed,\n}: PreviewPresentationProps) => {\n  const { Button, Text, Heading, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.CreatePayment')\n  const { t } = useTranslation('Contractor.Payments.CreatePayment', {\n    keyPrefix: 'previewPresentation',\n  })\n  const currencyFormatter = useNumberFormatter()\n\n  const formatWageType = (contractor: ContractorPaymentForGroupPreview) => {\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `${currencyFormatter(Number(contractor.hourlyRate || '0'))}${t('perHour')}`\n    }\n    return contractor.wageType\n  }\n\n  const totals = useMemo(\n    () =>\n      contractorPaymentGroup.contractorPayments?.reduce(\n        (acc, contractor) => {\n          acc.wageAmount += Number(contractor.wage || '0')\n          acc.bonusAmount += Number(contractor.bonus || '0')\n          acc.reimbursementAmount += Number(contractor.reimbursement || '0')\n          acc.totalAmount += Number(contractor.wageTotal || '0')\n          return acc\n        },\n        { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 },\n      ),\n    [contractorPaymentGroup.contractorPayments],\n  )\n\n  const contractorPayments = contractorPaymentGroup.contractorPayments || []\n\n  const submissionBlockers = (contractorPaymentGroup.submissionBlockers || []).filter(\n    blocker => blocker.status === 'unresolved',\n  )\n\n  const hasUnresolvableBlockers = submissionBlockers.some(\n    blocker => !PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(blocker.blockerType || ''),\n  )\n\n  const hasUnselectedBlockers = submissionBlockers.some(\n    blocker => !selectedUnblockOptions[blocker.blockerType || ''],\n  )\n\n  const isSubmitDisabled =\n    isLoading ||\n    (submissionBlockers.length > 0 && (hasUnresolvableBlockers || hasUnselectedBlockers))\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex justifyContent=\"flex-end\" gap={16}>\n        <Flex flexDirection=\"column\" gap={2}>\n          <Heading as=\"h2\">{t('reviewAndSubmitTitle')}</Heading>\n          <Text variant=\"supporting\">\n            {t('reviewSubtitle', { debitDate: contractorPaymentGroup.debitDate })}\n          </Text>\n        </Flex>\n        <Flex justifyContent=\"flex-end\" gap={16}>\n          <Button onClick={onBackToEdit} variant=\"secondary\">\n            {t('editButton')}\n          </Button>\n          <Button\n            onClick={onSubmit}\n            variant=\"primary\"\n            isLoading={isLoading}\n            isDisabled={isSubmitDisabled}\n          >\n            {t('submitButton')}\n          </Button>\n        </Flex>\n      </Flex>\n\n      <Alert\n        status=\"info\"\n        label={t('alerts.submitPaymentsDeadline', {\n          checkDate: contractorPaymentGroup.checkDate,\n          debitDate: contractorPaymentGroup.debitDate,\n        })}\n      />\n\n      {submissionBlockers.length > 0 &&\n        onUnblockOptionChange &&\n        submissionBlockers.map(blocker => {\n          const blockerType = blocker.blockerType || ''\n\n          if (PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES.includes(blockerType)) {\n            return (\n              <FastAchSubmissionBlockerBanner\n                key={blockerType}\n                blocker={blocker}\n                selectedValue={selectedUnblockOptions[blockerType]}\n                onUnblockOptionChange={onUnblockOptionChange}\n                paymentSpeed={paymentSpeed}\n              />\n            )\n          }\n\n          return <GenericBlocker key={blockerType} blocker={blocker} />\n        })}\n\n      {/* Payment Summary */}\n      <Heading as=\"h3\">{t('paymentSummaryTitle')}</Heading>\n      <DataView\n        columns={[\n          {\n            title: t('summaryTableHeaders.totalAmount'),\n            render: () => currencyFormatter(Number(contractorPaymentGroup.totals?.amount || '0')),\n          },\n          {\n            title: t('summaryTableHeaders.debitAmount'),\n            render: () =>\n              currencyFormatter(Number(contractorPaymentGroup.totals?.debitAmount || '0')),\n          },\n          {\n            title: t('summaryTableHeaders.debitAccount'),\n            render: () => bankAccount?.hiddenAccountNumber ?? t('naDebitAccount'),\n          },\n          {\n            title: t('summaryTableHeaders.debitDate'),\n            render: () => contractorPaymentGroup.debitDate || 'debitDate',\n          },\n          {\n            title: t('summaryTableHeaders.contractorPayDate'),\n            render: () => contractorPaymentGroup.checkDate || 'contractorPayDate',\n          },\n        ]}\n        data={[contractorPaymentGroup]}\n        label=\"Payment Summary\"\n      />\n\n      {/* Contractor Payments Table */}\n      <DataView\n        columns={[\n          {\n            title: t('contractorTableHeaders.contractor'),\n            render: contractorPayment =>\n              getContractorDisplayName(\n                contractors.find(\n                  contractor => contractor.uuid === contractorPayment.contractorUuid,\n                ),\n              ),\n          },\n          {\n            title: t('contractorTableHeaders.wageType'),\n            render: contractorPayment => formatWageType(contractorPayment),\n          },\n          {\n            title: t('contractorTableHeaders.paymentMethod'),\n            render: contractorPayment => contractorPayment.paymentMethod || 'N/A',\n          },\n          {\n            title: t('contractorTableHeaders.hours'),\n            justify: 'end',\n            render: contractorPayment => {\n              if (contractorPayment.wageType === 'Fixed') return t('na')\n              const hours = Number(contractorPayment.hours || '0')\n              return hours ? formatHoursDisplay(hours) : ZERO_HOURS_DISPLAY\n            },\n          },\n          {\n            title: t('contractorTableHeaders.wage'),\n            justify: 'end',\n            render: contractorPayment => {\n              if (contractorPayment.wageType === 'Hourly') return t('na')\n              return currencyFormatter(Number(contractorPayment.wage || '0'))\n            },\n          },\n          {\n            title: t('contractorTableHeaders.bonus'),\n            justify: 'end',\n            render: contractorPayment => currencyFormatter(Number(contractorPayment.bonus || '0')),\n          },\n          {\n            title: t('contractorTableHeaders.reimbursement'),\n            justify: 'end',\n            render: contractorPayment =>\n              currencyFormatter(Number(contractorPayment.reimbursement || '0')),\n          },\n          {\n            title: t('contractorTableHeaders.total'),\n            justify: 'end',\n            render: contractorPayment =>\n              currencyFormatter(Number(contractorPayment.wageTotal || '0')),\n          },\n        ]}\n        data={contractorPayments}\n        footer={() => ({\n          'column-0': t('totalsLabel'),\n          'column-4': currencyFormatter(totals?.wageAmount ?? 0),\n          'column-5': currencyFormatter(totals?.bonusAmount ?? 0),\n          'column-6': currencyFormatter(totals?.reimbursementAmount ?? 0),\n          'column-7': currencyFormatter(totals?.totalAmount ?? 0),\n        })}\n        label={t('whatYourCompanyPays')}\n      />\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","PreviewPresentation","contractorPaymentGroup","contractors","onBackToEdit","onSubmit","isLoading","bankAccount","selectedUnblockOptions","onUnblockOptionChange","paymentSpeed","Button","Text","Heading","Alert","useComponentContext","useI18n","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","totals","useMemo","acc","contractorPayments","submissionBlockers","blocker","hasUnresolvableBlockers","PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES","hasUnselectedBlockers","isSubmitDisabled","jsxs","Flex","jsx","blockerType","FastAchSubmissionBlockerBanner","GenericBlocker","DataView","contractorPayment","getContractorDisplayName","hours","formatHoursDisplay"],"mappings":"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"}

package/dist/components/Contractor/Payments/PaymentFlow/PaymentFlow.d.ts

@@ -1,12 +1,13 @@
 import { PaymentFlowProps } from './PaymentFlowComponents';
 /**
- * Guided workflow for creating, managing, and viewing contractor payment groups for a company.
+ * Hub for creating and managing contractor payments for a company.
  *
  * @remarks
  * Composes the contractor payment subcomponents into a complete experience with breadcrumb navigation between the payments list, the create-payment form, the post-creation summary, the payment-history detail view, and individual contractor payment statements. Also routes into the information-requests flow when a payment-related request needs a response, and surfaces wire-transfer confirmation alerts after a wire details submission.
  *
  * Events emitted by the subcomponents bubble up through the single `onEvent` handler.
  *
+ * @events
  * | Event | Description | Data |
  * | ----- | ----------- | ---- |
  * | `contractor/payments/create` | Fired when the user chooses to create a new payment | — |
@@ -21,12 +22,20 @@ import { PaymentFlowProps } from './PaymentFlowComponents';
  * | `informationRequest/form/cancel` | Fired when the information-requests flow is cancelled | — |
  * | `breadcrumb/navigate` | Fired when the user clicks a breadcrumb to navigate back | `{ key: string, onNavigate: (ctx) => ctx }` |
  *
+ * @components
+ * - {@link PaymentsList}
+ * - {@link CreatePayment}
+ * - {@link PaymentSummary}
+ * - {@link PaymentHistory}
+ * - {@link PaymentStatement}
+ * - {@link InformationRequests.InformationRequestsFlow | InformationRequestsFlow}
+ *
  * @param props - See {@link PaymentFlowProps}.
  * @returns The multi-step contractor payments workflow.
  * @public
  *
  * @example
- * ```tsx
+ * ```tsx title="App.tsx"
  * import { ContractorManagement } from '@gusto/embedded-react-sdk'
  *
  * function MyApp() {

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentFlow.js","sources":["../../../../../src/components/Contractor/Payments/PaymentFlow/PaymentFlow.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport { paymentFlowBreadcrumbsNodes, paymentMachine } from './paymentStateMachine'\nimport {\n  PaymentListContextual,\n  type PaymentFlowContextInterface,\n  type PaymentFlowProps,\n} from './PaymentFlowComponents'\nimport { Flow } from '@/components/Flow/Flow'\nimport { buildBreadcrumbs } from '@/helpers/breadcrumbHelpers'\n\n/**\n * Guided workflow for creating, managing, and viewing contractor payment groups for a company.\n *\n * @remarks\n * Composes the contractor payment subcomponents into a complete experience with breadcrumb navigation between the payments list, the create-payment form, the post-creation summary, the payment-history detail view, and individual contractor payment statements. Also routes into the information-requests flow when a payment-related request needs a response, and surfaces wire-transfer confirmation alerts after a wire details submission.\n *\n * Events emitted by the subcomponents bubble up through the single `onEvent` handler.\n *\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/payments/create` | Fired when the user chooses to create a new payment | — |\n * | `contractor/payments/created` | Fired when a payment group is successfully created | The created `ContractorPaymentGroup` |\n * | `contractor/payments/view` | Fired when the user selects a payment group to view | `{ paymentId: string }` |\n * | `contractor/payments/view/details` | Fired when the user views a specific contractor payment | `{ contractor: Contractor, paymentGroupId: string }` |\n * | `contractor/payments/cancel` | Fired when a payment is cancelled | `{ paymentId: string }` |\n * | `contractor/payments/exit` | Fired when the user completes the payment flow | `{ uuid?: string | null }` |\n * | `contractor/payments/rfi/respond` | Fired when the user clicks to respond to a pending information request | — |\n * | `payroll/wire/form/done` | Fired when wire transfer details are submitted | `{ wireInRequest: WireInRequest, confirmationAlert: { title: string, content?: string } }` |\n * | `informationRequest/form/done` | Fired when the information-requests flow completes | — |\n * | `informationRequest/form/cancel` | Fired when the information-requests flow is cancelled | — |\n * | `breadcrumb/navigate` | Fired when the user clicks a breadcrumb to navigate back | `{ key: string, onNavigate: (ctx) => ctx }` |\n *\n * @param props - See {@link PaymentFlowProps}.\n * @returns The multi-step contractor payments workflow.\n * @public\n *\n * @example\n * ```tsx\n * import { ContractorManagement } from '@gusto/embedded-react-sdk'\n *\n * function MyApp() {\n *   return (\n *     <ContractorManagement.PaymentFlow\n *       companyId=\"a007e1ab-3595-43c2-ab4b-af7a5af2e365\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport const PaymentFlow = ({ companyId, onEvent }: PaymentFlowProps) => {\n  const paymentFlow = useMemo(\n    () =>\n      createMachine('landing', paymentMachine, (initialContext: PaymentFlowContextInterface) => ({\n        ...initialContext,\n        component: PaymentListContextual,\n        companyId,\n        header: {\n          type: 'breadcrumbs' as const,\n          breadcrumbs: buildBreadcrumbs(paymentFlowBreadcrumbsNodes),\n        },\n      })),\n    [companyId],\n  )\n  return <Flow machine={paymentFlow} onEvent={onEvent} />\n}\n"],"names":["PaymentFlow","companyId","onEvent","paymentFlow","useMemo","createMachine","paymentMachine","initialContext","PaymentListContextual","buildBreadcrumbs","paymentFlowBreadcrumbsNodes","jsx","Flow"],"mappings":";;;;;;;AAmDO,MAAMA,IAAc,CAAC,EAAE,WAAAC,GAAW,SAAAC,QAAgC;AACvE,QAAMC,IAAcC;AAAA,IAClB,MACEC,EAAc,WAAWC,GAAgB,CAACC,OAAiD;AAAA,MACzF,GAAGA;AAAA,MACH,WAAWC;AAAA,MACX,WAAAP;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,aAAaQ,EAAiBC,CAA2B;AAAA,MAAA;AAAA,IAC3D,EACA;AAAA,IACJ,CAACT,CAAS;AAAA,EAAA;AAEZ,SAAO,gBAAAU,EAACC,GAAA,EAAK,SAAST,GAAa,SAAAD,EAAA,CAAkB;AACvD;"}
+{"version":3,"file":"PaymentFlow.js","sources":["../../../../../src/components/Contractor/Payments/PaymentFlow/PaymentFlow.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport { paymentFlowBreadcrumbsNodes, paymentMachine } from './paymentStateMachine'\nimport {\n  PaymentListContextual,\n  type PaymentFlowContextInterface,\n  type PaymentFlowProps,\n} from './PaymentFlowComponents'\nimport { Flow } from '@/components/Flow/Flow'\nimport { buildBreadcrumbs } from '@/helpers/breadcrumbHelpers'\n\n/**\n * Hub for creating and managing contractor payments for a company.\n *\n * @remarks\n * Composes the contractor payment subcomponents into a complete experience with breadcrumb navigation between the payments list, the create-payment form, the post-creation summary, the payment-history detail view, and individual contractor payment statements. Also routes into the information-requests flow when a payment-related request needs a response, and surfaces wire-transfer confirmation alerts after a wire details submission.\n *\n * Events emitted by the subcomponents bubble up through the single `onEvent` handler.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/payments/create` | Fired when the user chooses to create a new payment | — |\n * | `contractor/payments/created` | Fired when a payment group is successfully created | The created `ContractorPaymentGroup` |\n * | `contractor/payments/view` | Fired when the user selects a payment group to view | `{ paymentId: string }` |\n * | `contractor/payments/view/details` | Fired when the user views a specific contractor payment | `{ contractor: Contractor, paymentGroupId: string }` |\n * | `contractor/payments/cancel` | Fired when a payment is cancelled | `{ paymentId: string }` |\n * | `contractor/payments/exit` | Fired when the user completes the payment flow | `{ uuid?: string | null }` |\n * | `contractor/payments/rfi/respond` | Fired when the user clicks to respond to a pending information request | — |\n * | `payroll/wire/form/done` | Fired when wire transfer details are submitted | `{ wireInRequest: WireInRequest, confirmationAlert: { title: string, content?: string } }` |\n * | `informationRequest/form/done` | Fired when the information-requests flow completes | — |\n * | `informationRequest/form/cancel` | Fired when the information-requests flow is cancelled | — |\n * | `breadcrumb/navigate` | Fired when the user clicks a breadcrumb to navigate back | `{ key: string, onNavigate: (ctx) => ctx }` |\n *\n * @components\n * - {@link PaymentsList}\n * - {@link CreatePayment}\n * - {@link PaymentSummary}\n * - {@link PaymentHistory}\n * - {@link PaymentStatement}\n * - {@link InformationRequests.InformationRequestsFlow | InformationRequestsFlow}\n *\n * @param props - See {@link PaymentFlowProps}.\n * @returns The multi-step contractor payments workflow.\n * @public\n *\n * @example\n * ```tsx title=\"App.tsx\"\n * import { ContractorManagement } from '@gusto/embedded-react-sdk'\n *\n * function MyApp() {\n *   return (\n *     <ContractorManagement.PaymentFlow\n *       companyId=\"a007e1ab-3595-43c2-ab4b-af7a5af2e365\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport const PaymentFlow = ({ companyId, onEvent }: PaymentFlowProps) => {\n  const paymentFlow = useMemo(\n    () =>\n      createMachine('landing', paymentMachine, (initialContext: PaymentFlowContextInterface) => ({\n        ...initialContext,\n        component: PaymentListContextual,\n        companyId,\n        header: {\n          type: 'breadcrumbs' as const,\n          breadcrumbs: buildBreadcrumbs(paymentFlowBreadcrumbsNodes),\n        },\n      })),\n    [companyId],\n  )\n  return <Flow machine={paymentFlow} onEvent={onEvent} />\n}\n"],"names":["PaymentFlow","companyId","onEvent","paymentFlow","useMemo","createMachine","paymentMachine","initialContext","PaymentListContextual","buildBreadcrumbs","paymentFlowBreadcrumbsNodes","jsx","Flow"],"mappings":";;;;;;;AA4DO,MAAMA,IAAc,CAAC,EAAE,WAAAC,GAAW,SAAAC,QAAgC;AACvE,QAAMC,IAAcC;AAAA,IAClB,MACEC,EAAc,WAAWC,GAAgB,CAACC,OAAiD;AAAA,MACzF,GAAGA;AAAA,MACH,WAAWC;AAAA,MACX,WAAAP;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,aAAaQ,EAAiBC,CAA2B;AAAA,MAAA;AAAA,IAC3D,EACA;AAAA,IACJ,CAACT,CAAS;AAAA,EAAA;AAEZ,SAAO,gBAAAU,EAACC,GAAA,EAAK,SAAST,GAAa,SAAAD,EAAA,CAAkB;AACvD;"}

package/dist/components/Contractor/Payments/PaymentFlow/PaymentFlowComponents.d.ts

@@ -7,7 +7,7 @@ import { BreadcrumbTrail } from '../../../Common/FlowBreadcrumbs/FlowBreadcrumbs
  *
  * @public
  */
-export interface PaymentFlowProps extends BaseComponentInterface {
+export interface PaymentFlowProps extends BaseComponentInterface<never> {
     /** The associated company identifier. */
     companyId: string;
 }

package/dist/components/Contractor/Payments/PaymentFlow/PaymentFlowComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentFlowComponents.js","sources":["../../../../../src/components/Contractor/Payments/PaymentFlow/PaymentFlowComponents.tsx"],"sourcesContent":["import { PaymentsList } from '../PaymentsList/PaymentsList'\nimport { CreatePayment } from '../CreatePayment/CreatePayment'\nimport { PaymentHistory } from '../PaymentHistory/PaymentHistory'\nimport { PaymentStatement } from '../PaymentStatement/PaymentStatement'\nimport { PaymentSummary } from '../PaymentSummary'\nimport type { InternalAlert } from '../types'\nimport { InformationRequestsFlow } from '@/components/InformationRequests'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport type { BreadcrumbTrail } from '@/components/Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\n/**\n * Props for {@link PaymentFlow}.\n *\n * @public\n */\nexport interface PaymentFlowProps extends BaseComponentInterface {\n  /** The associated company identifier. */\n  companyId: string\n}\n\n/** @internal */\nexport interface PaymentFlowContextInterface extends FlowContextInterface {\n  companyId: string\n  breadcrumbs?: BreadcrumbTrail\n  currentPaymentId?: string\n  currentContractorUuid?: string\n  createdPaymentGroupId?: string\n  alerts?: InternalAlert[]\n}\n\n/** @internal */\nexport function PaymentListContextual() {\n  const { companyId, onEvent, alerts } = useFlow<PaymentFlowContextInterface>()\n  return <PaymentsList onEvent={onEvent} companyId={ensureRequired(companyId)} alerts={alerts} />\n}\n\n/** @internal */\nexport function CreatePaymentContextual() {\n  const { companyId, onEvent } = useFlow<PaymentFlowContextInterface>()\n  return <CreatePayment onEvent={onEvent} companyId={ensureRequired(companyId)} />\n}\n\n/** @internal */\nexport function PaymentHistoryContextual() {\n  const { currentPaymentId, onEvent } = useFlow<PaymentFlowContextInterface>()\n  return <PaymentHistory onEvent={onEvent} paymentId={ensureRequired(currentPaymentId)} />\n}\n\n/** @internal */\nexport function PaymentStatementContextual() {\n  const { currentPaymentId, currentContractorUuid, onEvent } =\n    useFlow<PaymentFlowContextInterface>()\n  return (\n    <PaymentStatement\n      onEvent={onEvent}\n      paymentGroupId={ensureRequired(currentPaymentId)}\n      contractorUuid={ensureRequired(currentContractorUuid)}\n    />\n  )\n}\n\n/** @internal */\nexport function PaymentSummaryContextual() {\n  const { createdPaymentGroupId, companyId, onEvent, alerts } =\n    useFlow<PaymentFlowContextInterface>()\n\n  return (\n    <PaymentSummary\n      onEvent={onEvent}\n      paymentGroupId={ensureRequired(createdPaymentGroupId)}\n      companyId={ensureRequired(companyId)}\n      alerts={alerts}\n    />\n  )\n}\n\n/** @internal */\nexport function InformationRequestsContextual() {\n  const { companyId, onEvent } = useFlow<PaymentFlowContextInterface>()\n  return (\n    <InformationRequestsFlow\n      companyId={ensureRequired(companyId)}\n      withAlert={false}\n      onEvent={onEvent}\n    />\n  )\n}\n"],"names":["PaymentListContextual","companyId","onEvent","alerts","useFlow","PaymentsList","ensureRequired","CreatePaymentContextual","CreatePayment","PaymentHistoryContextual","currentPaymentId","PaymentHistory","PaymentStatementContextual","currentContractorUuid","jsx","PaymentStatement","PaymentSummaryContextual","createdPaymentGroupId","PaymentSummary","InformationRequestsContextual","InformationRequestsFlow"],"mappings":";;;;;;;;;AAiCO,SAASA,IAAwB;AACtC,QAAM,EAAE,WAAAC,GAAW,SAAAC,GAAS,QAAAC,EAAA,IAAWC,EAAA;AACvC,2BAAQC,GAAA,EAAa,SAAAH,GAAkB,WAAWI,EAAeL,CAAS,GAAG,QAAAE,GAAgB;AAC/F;AAGO,SAASI,IAA0B;AACxC,QAAM,EAAE,WAAAN,GAAW,SAAAC,EAAA,IAAYE,EAAA;AAC/B,2BAAQI,GAAA,EAAc,SAAAN,GAAkB,WAAWI,EAAeL,CAAS,GAAG;AAChF;AAGO,SAASQ,IAA2B;AACzC,QAAM,EAAE,kBAAAC,GAAkB,SAAAR,EAAA,IAAYE,EAAA;AACtC,2BAAQO,GAAA,EAAe,SAAAT,GAAkB,WAAWI,EAAeI,CAAgB,GAAG;AACxF;AAGO,SAASE,IAA6B;AAC3C,QAAM,EAAE,kBAAAF,GAAkB,uBAAAG,GAAuB,SAAAX,EAAA,IAC/CE,EAAA;AACF,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAb;AAAA,MACA,gBAAgBI,EAAeI,CAAgB;AAAA,MAC/C,gBAAgBJ,EAAeO,CAAqB;AAAA,IAAA;AAAA,EAAA;AAG1D;AAGO,SAASG,IAA2B;AACzC,QAAM,EAAE,uBAAAC,GAAuB,WAAAhB,GAAW,SAAAC,GAAS,QAAAC,EAAA,IACjDC,EAAA;AAEF,SACE,gBAAAU;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,SAAAhB;AAAA,MACA,gBAAgBI,EAAeW,CAAqB;AAAA,MACpD,WAAWX,EAAeL,CAAS;AAAA,MACnC,QAAAE;AAAA,IAAA;AAAA,EAAA;AAGN;AAGO,SAASgB,IAAgC;AAC9C,QAAM,EAAE,WAAAlB,GAAW,SAAAC,EAAA,IAAYE,EAAA;AAC/B,SACE,gBAAAU;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,WAAWd,EAAeL,CAAS;AAAA,MACnC,WAAW;AAAA,MACX,SAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"PaymentFlowComponents.js","sources":["../../../../../src/components/Contractor/Payments/PaymentFlow/PaymentFlowComponents.tsx"],"sourcesContent":["import { PaymentsList } from '../PaymentsList/PaymentsList'\nimport { CreatePayment } from '../CreatePayment/CreatePayment'\nimport { PaymentHistory } from '../PaymentHistory/PaymentHistory'\nimport { PaymentStatement } from '../PaymentStatement/PaymentStatement'\nimport { PaymentSummary } from '../PaymentSummary'\nimport type { InternalAlert } from '../types'\nimport { InformationRequestsFlow } from '@/components/InformationRequests'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport type { BreadcrumbTrail } from '@/components/Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\n/**\n * Props for {@link PaymentFlow}.\n *\n * @public\n */\nexport interface PaymentFlowProps extends BaseComponentInterface<never> {\n  /** The associated company identifier. */\n  companyId: string\n}\n\n/** @internal */\nexport interface PaymentFlowContextInterface extends FlowContextInterface {\n  companyId: string\n  breadcrumbs?: BreadcrumbTrail\n  currentPaymentId?: string\n  currentContractorUuid?: string\n  createdPaymentGroupId?: string\n  alerts?: InternalAlert[]\n}\n\n/** @internal */\nexport function PaymentListContextual() {\n  const { companyId, onEvent, alerts } = useFlow<PaymentFlowContextInterface>()\n  return <PaymentsList onEvent={onEvent} companyId={ensureRequired(companyId)} alerts={alerts} />\n}\n\n/** @internal */\nexport function CreatePaymentContextual() {\n  const { companyId, onEvent } = useFlow<PaymentFlowContextInterface>()\n  return <CreatePayment onEvent={onEvent} companyId={ensureRequired(companyId)} />\n}\n\n/** @internal */\nexport function PaymentHistoryContextual() {\n  const { currentPaymentId, onEvent } = useFlow<PaymentFlowContextInterface>()\n  return <PaymentHistory onEvent={onEvent} paymentId={ensureRequired(currentPaymentId)} />\n}\n\n/** @internal */\nexport function PaymentStatementContextual() {\n  const { currentPaymentId, currentContractorUuid, onEvent } =\n    useFlow<PaymentFlowContextInterface>()\n  return (\n    <PaymentStatement\n      onEvent={onEvent}\n      paymentGroupId={ensureRequired(currentPaymentId)}\n      contractorUuid={ensureRequired(currentContractorUuid)}\n    />\n  )\n}\n\n/** @internal */\nexport function PaymentSummaryContextual() {\n  const { createdPaymentGroupId, companyId, onEvent, alerts } =\n    useFlow<PaymentFlowContextInterface>()\n\n  return (\n    <PaymentSummary\n      onEvent={onEvent}\n      paymentGroupId={ensureRequired(createdPaymentGroupId)}\n      companyId={ensureRequired(companyId)}\n      alerts={alerts}\n    />\n  )\n}\n\n/** @internal */\nexport function InformationRequestsContextual() {\n  const { companyId, onEvent } = useFlow<PaymentFlowContextInterface>()\n  return (\n    <InformationRequestsFlow\n      companyId={ensureRequired(companyId)}\n      withAlert={false}\n      onEvent={onEvent}\n    />\n  )\n}\n"],"names":["PaymentListContextual","companyId","onEvent","alerts","useFlow","PaymentsList","ensureRequired","CreatePaymentContextual","CreatePayment","PaymentHistoryContextual","currentPaymentId","PaymentHistory","PaymentStatementContextual","currentContractorUuid","jsx","PaymentStatement","PaymentSummaryContextual","createdPaymentGroupId","PaymentSummary","InformationRequestsContextual","InformationRequestsFlow"],"mappings":";;;;;;;;;AAiCO,SAASA,IAAwB;AACtC,QAAM,EAAE,WAAAC,GAAW,SAAAC,GAAS,QAAAC,EAAA,IAAWC,EAAA;AACvC,2BAAQC,GAAA,EAAa,SAAAH,GAAkB,WAAWI,EAAeL,CAAS,GAAG,QAAAE,GAAgB;AAC/F;AAGO,SAASI,IAA0B;AACxC,QAAM,EAAE,WAAAN,GAAW,SAAAC,EAAA,IAAYE,EAAA;AAC/B,2BAAQI,GAAA,EAAc,SAAAN,GAAkB,WAAWI,EAAeL,CAAS,GAAG;AAChF;AAGO,SAASQ,IAA2B;AACzC,QAAM,EAAE,kBAAAC,GAAkB,SAAAR,EAAA,IAAYE,EAAA;AACtC,2BAAQO,GAAA,EAAe,SAAAT,GAAkB,WAAWI,EAAeI,CAAgB,GAAG;AACxF;AAGO,SAASE,IAA6B;AAC3C,QAAM,EAAE,kBAAAF,GAAkB,uBAAAG,GAAuB,SAAAX,EAAA,IAC/CE,EAAA;AACF,SACE,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAb;AAAA,MACA,gBAAgBI,EAAeI,CAAgB;AAAA,MAC/C,gBAAgBJ,EAAeO,CAAqB;AAAA,IAAA;AAAA,EAAA;AAG1D;AAGO,SAASG,IAA2B;AACzC,QAAM,EAAE,uBAAAC,GAAuB,WAAAhB,GAAW,SAAAC,GAAS,QAAAC,EAAA,IACjDC,EAAA;AAEF,SACE,gBAAAU;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,SAAAhB;AAAA,MACA,gBAAgBI,EAAeW,CAAqB;AAAA,MACpD,WAAWX,EAAeL,CAAS;AAAA,MACnC,QAAAE;AAAA,IAAA;AAAA,EAAA;AAGN;AAGO,SAASgB,IAAgC;AAC9C,QAAM,EAAE,WAAAlB,GAAW,SAAAC,EAAA,IAAYE,EAAA;AAC/B,SACE,gBAAAU;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,WAAWd,EAAeL,CAAS;AAAA,MACnC,WAAW;AAAA,MACX,SAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Contractor/Payments/PaymentHistory/PaymentHistory.d.ts

@@ -12,6 +12,13 @@ export interface PaymentHistoryProps extends BaseComponentInterface<'Contractor.
  * Displays a contractor payment group, including each individual contractor payment, with actions to view details or cancel.
  *
  * @remarks
+ * Features:
+ *
+ * - **Payment group overview** — debit date and group context in the header.
+ * - **Per-contractor table** — contractor, wage type, payment method, hours, wage, bonus, reimbursement, and total for each payment.
+ * - **Row actions** — view an individual contractor payment, or cancel it when the payment is cancelable.
+ *
+ * @events
  * | Event | Description | Data |
  * | ----- | ----------- | ---- |
  * | `contractor/payments/view/details` | A row's view-details action was triggered. | `{ contractor: Contractor \| undefined, paymentGroupId: string }` — `contractor` is `undefined` if the contractor UUID is not found in the loaded list |

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentHistory.js","sources":["../../../../../src/components/Contractor/Payments/PaymentHistory/PaymentHistory.tsx"],"sourcesContent":["import { useContractorPaymentGroupsGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentGroupsGet'\nimport { useContractorsListSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsList'\nimport { useContractorPaymentsDeleteMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentsDelete'\nimport { useTranslation } from 'react-i18next'\nimport { PaymentHistoryPresentation } from './PaymentHistoryPresentation'\nimport { useComponentDictionary } from '@/i18n'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\n\n/**\n * Props for {@link PaymentHistory}.\n *\n * @public\n */\nexport interface PaymentHistoryProps extends BaseComponentInterface<'Contractor.Payments.PaymentHistory'> {\n  /** UUID of the contractor payment group to display. */\n  paymentId: string\n}\n\n/**\n * Displays a contractor payment group, including each individual contractor payment, with actions to view details or cancel.\n *\n * @remarks\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/payments/view/details` | A row's view-details action was triggered. | `{ contractor: Contractor \\| undefined, paymentGroupId: string }` — `contractor` is `undefined` if the contractor UUID is not found in the loaded list |\n * | `contractor/payments/cancel` | An individual contractor payment was successfully canceled. | `{ paymentId: string }` — the individual contractor payment UUID, not the payment group UUID passed as `paymentId` prop |\n *\n * @param props - Component props including the payment group `paymentId` and the standard `onEvent` callback.\n * @returns The rendered payment history view for the payment group.\n * @public\n *\n * @example\n * ```tsx\n * import { ContractorManagement } from '@gusto/embedded-react-sdk'\n *\n * <ContractorManagement.PaymentHistory\n *   paymentId=\"payment-group-uuid\"\n *   onEvent={() => {}}\n * />\n * ```\n */\nexport function PaymentHistory(props: PaymentHistoryProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ paymentId, dictionary, onEvent }: PaymentHistoryProps) => {\n  useComponentDictionary('Contractor.Payments.PaymentHistory', dictionary)\n  const { t } = useTranslation('Contractor.Payments.PaymentHistory')\n  const { baseSubmitHandler } = useBase()\n\n  const { data: paymentGroupResponse } = useContractorPaymentGroupsGetSuspense({\n    contractorPaymentGroupUuid: paymentId,\n  })\n  if (!paymentGroupResponse.contractorPaymentGroup) {\n    throw new Error(t('errors.paymentGroupNotFound'))\n  }\n\n  const companyId = paymentGroupResponse.contractorPaymentGroup.companyUuid!\n\n  const { data: contractorList } = useContractorsListSuspense({ companyUuid: companyId })\n  const contractors = contractorList.contractors || []\n\n  const { mutateAsync: cancelPayment, isPending: isCancelling } =\n    useContractorPaymentsDeleteMutation()\n\n  const handleViewPayment = (contractorUuid: string) => {\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_VIEW_DETAILS, {\n      contractor: contractors.find(c => c.uuid === contractorUuid),\n      paymentGroupId: paymentId,\n    })\n  }\n\n  const handleCancelPayment = async (paymentId: string) => {\n    await baseSubmitHandler(paymentId, async () => {\n      await cancelPayment({\n        request: {\n          contractorPaymentId: paymentId,\n          companyId,\n        },\n      })\n    })\n\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_CANCEL, { paymentId })\n  }\n\n  return (\n    <>\n      <PaymentHistoryPresentation\n        paymentGroup={paymentGroupResponse.contractorPaymentGroup}\n        contractors={contractors}\n        isCancelling={isCancelling}\n        onViewPayment={handleViewPayment}\n        onCancelPayment={handleCancelPayment}\n      />\n    </>\n  )\n}\n"],"names":["PaymentHistory","props","jsx","BaseComponent","Root","paymentId","dictionary","onEvent","useComponentDictionary","t","useTranslation","baseSubmitHandler","useBase","paymentGroupResponse","useContractorPaymentGroupsGetSuspense","companyId","contractorList","useContractorsListSuspense","contractors","cancelPayment","isCancelling","useContractorPaymentsDeleteMutation","handleViewPayment","contractorUuid","componentEvents","c","handleCancelPayment","Fragment","PaymentHistoryPresentation"],"mappings":";;;;;;;;;;AA0CO,SAASA,EAAeC,GAA4B;AACzD,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,WAAAC,GAAW,YAAAC,GAAY,SAAAC,QAAmC;AACxE,EAAAC,EAAuB,sCAAsCF,CAAU;AACvE,QAAM,EAAE,GAAAG,EAAA,IAAMC,EAAe,oCAAoC,GAC3D,EAAE,mBAAAC,EAAA,IAAsBC,EAAA,GAExB,EAAE,MAAMC,EAAA,IAAyBC,EAAsC;AAAA,IAC3E,4BAA4BT;AAAA,EAAA,CAC7B;AACD,MAAI,CAACQ,EAAqB;AACxB,UAAM,IAAI,MAAMJ,EAAE,6BAA6B,CAAC;AAGlD,QAAMM,IAAYF,EAAqB,uBAAuB,aAExD,EAAE,MAAMG,EAAA,IAAmBC,EAA2B,EAAE,aAAaF,GAAW,GAChFG,IAAcF,EAAe,eAAe,CAAA,GAE5C,EAAE,aAAaG,GAAe,WAAWC,EAAA,IAC7CC,EAAA,GAEIC,IAAoB,CAACC,MAA2B;AACpD,IAAAhB,EAAQiB,EAAgB,iCAAiC;AAAA,MACvD,YAAYN,EAAY,KAAK,CAAAO,MAAKA,EAAE,SAASF,CAAc;AAAA,MAC3D,gBAAgBlB;AAAA,IAAA,CACjB;AAAA,EACH,GAEMqB,IAAsB,OAAOrB,MAAsB;AACvD,UAAMM,EAAkBN,GAAW,YAAY;AAC7C,YAAMc,EAAc;AAAA,QAClB,SAAS;AAAA,UACP,qBAAqBd;AAAAA,UACrB,WAAAU;AAAA,QAAA;AAAA,MACF,CACD;AAAA,IACH,CAAC,GAEDR,EAAQiB,EAAgB,2BAA2B,EAAE,WAAAnB,GAAW;AAAA,EAClE;AAEA,SACE,gBAAAH,EAAAyB,GAAA,EACE,UAAA,gBAAAzB;AAAA,IAAC0B;AAAA,IAAA;AAAA,MACC,cAAcf,EAAqB;AAAA,MACnC,aAAAK;AAAA,MACA,cAAAE;AAAA,MACA,eAAeE;AAAA,MACf,iBAAiBI;AAAA,IAAA;AAAA,EAAA,GAErB;AAEJ;"}
+{"version":3,"file":"PaymentHistory.js","sources":["../../../../../src/components/Contractor/Payments/PaymentHistory/PaymentHistory.tsx"],"sourcesContent":["import { useContractorPaymentGroupsGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentGroupsGet'\nimport { useContractorsListSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorsList'\nimport { useContractorPaymentsDeleteMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentsDelete'\nimport { useTranslation } from 'react-i18next'\nimport { PaymentHistoryPresentation } from './PaymentHistoryPresentation'\nimport { useComponentDictionary } from '@/i18n'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\n\n/**\n * Props for {@link PaymentHistory}.\n *\n * @public\n */\nexport interface PaymentHistoryProps extends BaseComponentInterface<'Contractor.Payments.PaymentHistory'> {\n  /** UUID of the contractor payment group to display. */\n  paymentId: string\n}\n\n/**\n * Displays a contractor payment group, including each individual contractor payment, with actions to view details or cancel.\n *\n * @remarks\n * Features:\n *\n * - **Payment group overview** — debit date and group context in the header.\n * - **Per-contractor table** — contractor, wage type, payment method, hours, wage, bonus, reimbursement, and total for each payment.\n * - **Row actions** — view an individual contractor payment, or cancel it when the payment is cancelable.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/payments/view/details` | A row's view-details action was triggered. | `{ contractor: Contractor \\| undefined, paymentGroupId: string }` — `contractor` is `undefined` if the contractor UUID is not found in the loaded list |\n * | `contractor/payments/cancel` | An individual contractor payment was successfully canceled. | `{ paymentId: string }` — the individual contractor payment UUID, not the payment group UUID passed as `paymentId` prop |\n *\n * @param props - Component props including the payment group `paymentId` and the standard `onEvent` callback.\n * @returns The rendered payment history view for the payment group.\n * @public\n *\n * @example\n * ```tsx\n * import { ContractorManagement } from '@gusto/embedded-react-sdk'\n *\n * <ContractorManagement.PaymentHistory\n *   paymentId=\"payment-group-uuid\"\n *   onEvent={() => {}}\n * />\n * ```\n */\nexport function PaymentHistory(props: PaymentHistoryProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ paymentId, dictionary, onEvent }: PaymentHistoryProps) => {\n  useComponentDictionary('Contractor.Payments.PaymentHistory', dictionary)\n  const { t } = useTranslation('Contractor.Payments.PaymentHistory')\n  const { baseSubmitHandler } = useBase()\n\n  const { data: paymentGroupResponse } = useContractorPaymentGroupsGetSuspense({\n    contractorPaymentGroupUuid: paymentId,\n  })\n  if (!paymentGroupResponse.contractorPaymentGroup) {\n    throw new Error(t('errors.paymentGroupNotFound'))\n  }\n\n  const companyId = paymentGroupResponse.contractorPaymentGroup.companyUuid!\n\n  const { data: contractorList } = useContractorsListSuspense({ companyUuid: companyId })\n  const contractors = contractorList.contractors || []\n\n  const { mutateAsync: cancelPayment, isPending: isCancelling } =\n    useContractorPaymentsDeleteMutation()\n\n  const handleViewPayment = (contractorUuid: string) => {\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_VIEW_DETAILS, {\n      contractor: contractors.find(c => c.uuid === contractorUuid),\n      paymentGroupId: paymentId,\n    })\n  }\n\n  const handleCancelPayment = async (paymentId: string) => {\n    await baseSubmitHandler(paymentId, async () => {\n      await cancelPayment({\n        request: {\n          contractorPaymentId: paymentId,\n          companyId,\n        },\n      })\n    })\n\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_CANCEL, { paymentId })\n  }\n\n  return (\n    <>\n      <PaymentHistoryPresentation\n        paymentGroup={paymentGroupResponse.contractorPaymentGroup}\n        contractors={contractors}\n        isCancelling={isCancelling}\n        onViewPayment={handleViewPayment}\n        onCancelPayment={handleCancelPayment}\n      />\n    </>\n  )\n}\n"],"names":["PaymentHistory","props","jsx","BaseComponent","Root","paymentId","dictionary","onEvent","useComponentDictionary","t","useTranslation","baseSubmitHandler","useBase","paymentGroupResponse","useContractorPaymentGroupsGetSuspense","companyId","contractorList","useContractorsListSuspense","contractors","cancelPayment","isCancelling","useContractorPaymentsDeleteMutation","handleViewPayment","contractorUuid","componentEvents","c","handleCancelPayment","Fragment","PaymentHistoryPresentation"],"mappings":";;;;;;;;;;AAiDO,SAASA,EAAeC,GAA4B;AACzD,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,WAAAC,GAAW,YAAAC,GAAY,SAAAC,QAAmC;AACxE,EAAAC,EAAuB,sCAAsCF,CAAU;AACvE,QAAM,EAAE,GAAAG,EAAA,IAAMC,EAAe,oCAAoC,GAC3D,EAAE,mBAAAC,EAAA,IAAsBC,EAAA,GAExB,EAAE,MAAMC,EAAA,IAAyBC,EAAsC;AAAA,IAC3E,4BAA4BT;AAAA,EAAA,CAC7B;AACD,MAAI,CAACQ,EAAqB;AACxB,UAAM,IAAI,MAAMJ,EAAE,6BAA6B,CAAC;AAGlD,QAAMM,IAAYF,EAAqB,uBAAuB,aAExD,EAAE,MAAMG,EAAA,IAAmBC,EAA2B,EAAE,aAAaF,GAAW,GAChFG,IAAcF,EAAe,eAAe,CAAA,GAE5C,EAAE,aAAaG,GAAe,WAAWC,EAAA,IAC7CC,EAAA,GAEIC,IAAoB,CAACC,MAA2B;AACpD,IAAAhB,EAAQiB,EAAgB,iCAAiC;AAAA,MACvD,YAAYN,EAAY,KAAK,CAAAO,MAAKA,EAAE,SAASF,CAAc;AAAA,MAC3D,gBAAgBlB;AAAA,IAAA,CACjB;AAAA,EACH,GAEMqB,IAAsB,OAAOrB,MAAsB;AACvD,UAAMM,EAAkBN,GAAW,YAAY;AAC7C,YAAMc,EAAc;AAAA,QAClB,SAAS;AAAA,UACP,qBAAqBd;AAAAA,UACrB,WAAAU;AAAA,QAAA;AAAA,MACF,CACD;AAAA,IACH,CAAC,GAEDR,EAAQiB,EAAgB,2BAA2B,EAAE,WAAAnB,GAAW;AAAA,EAClE;AAEA,SACE,gBAAAH,EAAAyB,GAAA,EACE,UAAA,gBAAAzB;AAAA,IAAC0B;AAAA,IAAA;AAAA,MACC,cAAcf,EAAqB;AAAA,MACnC,aAAAK;AAAA,MACA,cAAAE;AAAA,MACA,eAAeE;AAAA,MACf,iBAAiBI;AAAA,IAAA;AAAA,EAAA,GAErB;AAEJ;"}

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

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