@gusto/embedded-react-sdk 0.37.0 → 0.38.0-rc.2

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

@@ -1,126 +1,114 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useTranslation as S, Trans as F } from "react-i18next";
-import { useMemo as v } from "react";
-import { getContractorDisplayName as x } from "../CreatePayment/helpers.js";
-import i from "./PaymentStatementPresentation.module.scss.js";
-import { Flex as m } from "../../../Common/Flex/Flex.js";
-import "classnames";
-import "../../../../shared/constants.js";
-import { useComponentContext as C } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as A } from "../../../../i18n/I18n.js";
-import { formatHoursDisplay as H } from "../../../Payroll/helpers.js";
-import M from "../../../../hooks/useNumberFormatter.js";
-import { useDateFormatter as j } from "../../../../hooks/useDateFormatter.js";
+import { useTranslation as k, Trans as F } from "react-i18next";
+import { useMemo as C } from "react";
+import { getContractorDisplayName as v } from "../CreatePayment/helpers.js";
+import l from "./PaymentStatementPresentation.module.scss.js";
+import { Flex as c } from "../../../Common/Flex/Flex.js";
+import { useComponentContext as H } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as M } from "../../../../i18n/I18n.js";
+import { formatHoursDisplay as A } from "../../../Payroll/helpers.js";
+import j from "../../../../hooks/useNumberFormatter.js";
+import { useDateFormatter as y } 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 w } from "../../../Common/DataView/DataView.js";
+import { DataView as U } from "../../../Common/DataView/DataView.js";
 const re = ({
-  payment: s,
-  contractor: c,
-  checkDate: k,
+  payment: o,
+  contractor: m,
+  checkDate: w,
   paymentReceipt: t
 }) => {
-  const { Text: n, Heading: h } = C();
-  A("Contractor.Payments.PaymentStatement");
-  const { t: r } = S("Contractor.Payments.PaymentStatement"), l = M("currency"), { formatLongWithYear: u } = j(), { Link: I } = C(), b = x(c), f = s.wageType === "Hourly", d = Number(s.hours || 0), p = Number(s.hourlyRate || 0), g = Number(s.bonus || 0), N = Number(s.reimbursement || 0), D = Number(s.wageTotal || 0), T = !!(t && s.status === "Funded" && s.paymentMethod === "Direct Deposit"), z = t?.totals?.companyDebit || "0", L = v(() => t ? [
+  const h = H(), { Text: n, Heading: b, Link: z } = h;
+  M("Contractor.Payments.PaymentStatement");
+  const { t: r } = k("Contractor.Payments.PaymentStatement"), i = j("currency"), { formatLongWithYear: u } = y(), f = v(m), p = o.wageType === "Hourly", d = Number(o.hours || 0), g = Number(o.hourlyRate || 0), D = Number(o.bonus || 0), N = Number(o.reimbursement || 0), x = Number(o.wageTotal || 0), I = !!(t && o.status === "Funded" && o.paymentMethod === "Direct Deposit"), S = t?.totals?.companyDebit || "0", L = C(() => t ? [
     {
       label: r("receipt.from"),
       value: t.nameOfSender || ""
     },
     {
       label: r("receipt.to"),
-      value: x(c)
+      value: v(m)
     },
     {
       label: r("receipt.debitDate"),
       value: t.debitDate ? u(String(t.debitDate)) : ""
     }
-  ] : [], [t, c, r, u]), P = v(() => {
-    const o = [
+  ] : [], [t, m, r, u]), P = C(() => {
+    const s = [
       {
-        label: s.paymentMethod || "",
-        amount: l(D)
+        label: o.paymentMethod || "",
+        amount: i(x)
       }
     ];
-    return f && d > 0 ? o.push({
+    return p && d > 0 ? s.push({
       label: r("hoursLabel"),
       amount: r("hoursAmount", {
-        hours: H(d),
-        rate: l(p)
+        hours: A(d),
+        rate: i(g)
       })
-    }) : o.push({
+    }) : s.push({
       label: r("wageLabel"),
-      amount: l(Number(s.wage || 0))
-    }), o.push({
+      amount: i(Number(o.wage || 0))
+    }), s.push({
       label: r("bonus"),
-      amount: l(g)
-    }), o.push({
+      amount: i(D)
+    }), s.push({
       label: r("reimbursement"),
-      amount: l(N)
-    }), o;
+      amount: i(N)
+    }), s;
   }, [
-    s.paymentMethod,
-    D,
-    f,
-    d,
+    o.paymentMethod,
+    x,
     p,
+    d,
     g,
+    D,
     N,
     r,
-    l,
-    s.wage
+    i,
+    o.wage
   ]);
-  return /* @__PURE__ */ a(m, { flexDirection: "column", gap: 32, children: [
-    /* @__PURE__ */ e(m, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ a(m, { flexDirection: "column", gap: 8, children: [
-      /* @__PURE__ */ e(h, { as: "h2", children: r("title", { contractorName: b }) }),
-      /* @__PURE__ */ e(n, { children: u(k) })
+  return /* @__PURE__ */ a(c, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ e(c, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ a(c, { flexDirection: "column", gap: 8, children: [
+      /* @__PURE__ */ e(b, { as: "h2", children: r("title", { contractorName: f }) }),
+      /* @__PURE__ */ e(n, { children: u(w) })
     ] }) }),
-    T && /* @__PURE__ */ e("div", { className: i.receiptCard, children: /* @__PURE__ */ a(m, { flexDirection: "column", gap: 24, children: [
-      /* @__PURE__ */ a(m, { flexDirection: "column", alignItems: "center", gap: 16, children: [
-        /* @__PURE__ */ e("div", { className: i.receiptIcon, "aria-hidden": !0, children: /* @__PURE__ */ e(O, { className: i.checkmarkIcon }) }),
-        /* @__PURE__ */ a(m, { flexDirection: "column", alignItems: "center", gap: 8, children: [
+    I && /* @__PURE__ */ e("div", { className: l.receiptCard, children: /* @__PURE__ */ a(c, { flexDirection: "column", gap: 24, children: [
+      /* @__PURE__ */ a(c, { flexDirection: "column", alignItems: "center", gap: 16, children: [
+        /* @__PURE__ */ e("div", { className: l.receiptIcon, "aria-hidden": !0, children: /* @__PURE__ */ e(O, { className: l.checkmarkIcon }) }),
+        /* @__PURE__ */ a(c, { flexDirection: "column", alignItems: "center", gap: 8, children: [
           /* @__PURE__ */ e(n, { size: "sm", variant: "supporting", children: r("receipt.totalLabel") }),
-          /* @__PURE__ */ e(h, { as: "h1", styledAs: "h2", className: i.totalAmount, children: l(Number(z)) })
+          /* @__PURE__ */ e(b, { as: "h1", styledAs: "h2", className: l.totalAmount, children: i(Number(S)) })
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: i.receiptDetailsTable, children: /* @__PURE__ */ e(
-        w,
+      /* @__PURE__ */ e(
+        h.DescriptionList,
         {
-          label: r("receipt.detailsLabel"),
-          variant: "minimal",
-          breakAt: "small",
-          breakpoints: {
-            base: "0rem",
-            small: "22rem"
-          },
-          columns: [
-            {
-              title: "",
-              render: (o) => /* @__PURE__ */ e(n, { size: "sm", variant: "supporting", children: o.label })
-            },
-            {
-              title: "",
-              render: (o) => /* @__PURE__ */ e(n, { size: "sm", children: o.value })
-            }
-          ],
-          data: L
+          layout: "horizontal",
+          showSeparators: !1,
+          items: L.map(
+            ({ label: s, value: T }) => ({
+              term: /* @__PURE__ */ e(n, { size: "sm", variant: "supporting", children: s }),
+              description: /* @__PURE__ */ e(n, { size: "sm", children: T })
+            })
+          )
         }
-      ) }),
+      ),
       /* @__PURE__ */ e("hr", {}),
-      /* @__PURE__ */ a(m, { flexDirection: "column", alignItems: "center", gap: 12, children: [
-        /* @__PURE__ */ e(n, { size: "sm", variant: "supporting", className: i.disclaimer, children: /* @__PURE__ */ e(
+      /* @__PURE__ */ a(c, { flexDirection: "column", alignItems: "center", gap: 12, children: [
+        /* @__PURE__ */ e(n, { size: "sm", variant: "supporting", className: l.disclaimer, children: /* @__PURE__ */ e(
           F,
           {
             i18nKey: "receipt.disclaimer",
             t: r,
             components: {
-              licensesLink: /* @__PURE__ */ e(I, { href: t?.licenseUri || "", target: "_blank" })
+              licensesLink: /* @__PURE__ */ e(z, { href: t?.licenseUri || "", target: "_blank" })
             }
           }
         ) }),
         /* @__PURE__ */ e("hr", {}),
-        /* @__PURE__ */ e(n, { size: "sm", variant: "supporting", className: i.companyInfo, children: t?.licensee?.name || "" }),
-        /* @__PURE__ */ a(n, { size: "sm", variant: "supporting", className: i.address, children: [
+        /* @__PURE__ */ e(n, { size: "sm", variant: "supporting", className: l.companyInfo, children: t?.licensee?.name || "" }),
+        /* @__PURE__ */ a(n, { size: "sm", variant: "supporting", className: l.address, children: [
           B({
             street1: t?.licensee?.address || "",
             city: t?.licensee?.city || "",
@@ -133,20 +121,20 @@ const re = ({
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      w,
+      U,
       {
         columns: [
           {
             title: r("debitedColumn"),
-            render: ({ label: o }) => /* @__PURE__ */ e(n, { children: o })
+            render: ({ label: s }) => /* @__PURE__ */ e(n, { children: s })
           },
           {
             title: r("amountColumn"),
-            render: ({ amount: o }) => /* @__PURE__ */ e(n, { children: o || "" })
+            render: ({ amount: s }) => /* @__PURE__ */ e(n, { children: s || "" })
           }
         ],
         data: P,
-        label: r("title", { contractorName: b })
+        label: r("title", { contractorName: f })
       }
     )
   ] });

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 '../CreatePayment/helpers'\nimport styles from './PaymentStatementPresentation.module.scss'\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 { 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\nexport const PaymentStatementPresentation = ({\n  payment,\n  contractor,\n  checkDate,\n  paymentReceipt,\n}: PaymentStatementPresentationProps) => {\n  const { Text, Heading } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentStatement')\n  const { t } = useTranslation('Contractor.Payments.PaymentStatement')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n  const { Link } = useComponentContext()\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  const wageTotal = Number(payment.wageTotal || 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(wageTotal),\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  }, [\n    payment.paymentMethod,\n    wageTotal,\n    isHourly,\n    hours,\n    hourlyRate,\n    bonus,\n    reimbursement,\n    t,\n    currencyFormatter,\n    payment.wage,\n  ])\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>{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            <div className={styles.receiptDetailsTable}>\n              <DataView\n                label={t('receipt.detailsLabel')}\n                variant=\"minimal\"\n                breakAt=\"small\"\n                breakpoints={{\n                  base: '0rem',\n                  small: '22rem',\n                }}\n                columns={[\n                  {\n                    title: '',\n                    render: (item: { label: string; value: string }) => (\n                      <Text size=\"sm\" variant=\"supporting\">\n                        {item.label}\n                      </Text>\n                    ),\n                  },\n                  {\n                    title: '',\n                    render: (item: { label: string; value: string }) => (\n                      <Text size=\"sm\">{item.value}</Text>\n                    ),\n                  },\n                ]}\n                data={receiptDetailsConfig}\n              />\n            </div>\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 }) => <Text>{label}</Text>,\n          },\n          {\n            title: t('amountColumn'),\n            render: ({ amount }) => <Text>{amount || ''}</Text>,\n          },\n        ]}\n        data={statementRows}\n        label={t('title', { contractorName })}\n      />\n    </Flex>\n  )\n}\n"],"names":["PaymentStatementPresentation","payment","contractor","checkDate","paymentReceipt","Text","Heading","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","Link","contractorName","getContractorDisplayName","isHourly","hours","hourlyRate","bonus","reimbursement","wageTotal","shouldShowReceipt","receiptTotal","receiptDetailsConfig","useMemo","statementRows","rows","formatHoursDisplay","jsxs","Flex","jsx","styles","ReceiptCheck","DataView","item","Trans","addressInline","formatPhoneNumber","label","amount"],"mappings":"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"}
+{"version":3,"file":"PaymentStatementPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport type { ContractorPaymentForGroup } from '@gusto/embedded-api/models/components/contractorpaymentforgroup'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { useMemo } from 'react'\nimport type { ContractorPaymentReceipt } from '@gusto/embedded-api/models/components/contractorpaymentreceipt'\nimport { getContractorDisplayName } from '../CreatePayment/helpers'\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\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  const wageTotal = Number(payment.wageTotal || 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(wageTotal),\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  }, [\n    payment.paymentMethod,\n    wageTotal,\n    isHourly,\n    hours,\n    hourlyRate,\n    bonus,\n    reimbursement,\n    t,\n    currencyFormatter,\n    payment.wage,\n  ])\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>{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(\n                ({ 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            />\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 }) => <Text>{label}</Text>,\n          },\n          {\n            title: t('amountColumn'),\n            render: ({ amount }) => <Text>{amount || ''}</Text>,\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","wageTotal","shouldShowReceipt","receiptTotal","receiptDetailsConfig","useMemo","statementRows","rows","formatHoursDisplay","jsxs","Flex","jsx","styles","ReceiptCheck","label","value","Trans","addressInline","formatPhoneNumber","DataView","amount"],"mappings":"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"}

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

@@ -1,22 +1,20 @@
-const c = "_receiptCard_61okl_1", e = "_receiptIcon_61okl_12", o = "_checkmarkIcon_61okl_23", t = "_totalAmount_61okl_29", a = "_receiptDetailsTable_61okl_34", n = "_disclaimer_61okl_58", s = "_companyInfo_61okl_63", _ = "_address_61okl_67", l = {
+const c = "_receiptCard_18x1n_1", n = "_receiptIcon_18x1n_12", o = "_checkmarkIcon_18x1n_23", t = "_totalAmount_18x1n_29", e = "_disclaimer_18x1n_34", _ = "_companyInfo_18x1n_39", a = "_address_18x1n_43", s = {
   receiptCard: c,
-  receiptIcon: e,
+  receiptIcon: n,
   checkmarkIcon: o,
   totalAmount: t,
-  receiptDetailsTable: a,
-  disclaimer: n,
-  companyInfo: s,
-  address: _
+  disclaimer: e,
+  companyInfo: _,
+  address: a
 };
 export {
-  _ as address,
+  a as address,
   o as checkmarkIcon,
-  s as companyInfo,
-  l as default,
-  n as disclaimer,
+  _ as companyInfo,
+  s as default,
+  e as disclaimer,
   c as receiptCard,
-  a as receiptDetailsTable,
-  e as receiptIcon,
+  n as receiptIcon,
   t as totalAmount
 };
 //# sourceMappingURL=PaymentStatementPresentation.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentStatementPresentation.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"PaymentStatementPresentation.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/components/Contractor/Payments/PaymentSummary/PaymentSummaryPresentation.js

@@ -1,35 +1,33 @@
-import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
 import { useTranslation as T } from "react-i18next";
 import { useMemo as x } from "react";
 import { getContractorDisplayName as C } from "../CreatePayment/helpers.js";
-import { Flex as s } from "../../../Common/Flex/Flex.js";
-import "classnames";
-import "../../../../shared/constants.js";
+import { Flex as l } from "../../../Common/Flex/Flex.js";
 import { useComponentContext as M } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as S } from "../../../../i18n/I18n.js";
 import { formatHoursDisplay as v } from "../../../Payroll/helpers.js";
 import H from "../../../../hooks/useNumberFormatter.js";
 import { ConfirmWireDetails as $ } from "../../../Payroll/ConfirmWireDetails/ConfirmWireDetails.js";
-import { DataView as b } from "../../../Common/DataView/DataView.js";
-const k = "0.000", Y = ({
+import { DataView as c } from "../../../Common/DataView/DataView.js";
+const k = "0.000", U = ({
   contractorPaymentGroup: m,
-  contractors: p,
+  contractors: h,
   bankAccount: y,
   companyId: g,
-  wireInRequestUuid: d,
+  wireInRequestUuid: a,
   onEvent: A,
   onDone: f,
-  alerts: c = []
+  alerts: d = []
 }) => {
-  const { Button: D, Text: r, Heading: w, Alert: h } = M();
+  const { Button: D, Text: b, Heading: w, Alert: p } = M();
   S("Contractor.Payments.PaymentSummary");
-  const { t } = T("Contractor.Payments.PaymentSummary"), i = H(), N = (e) => e.wageType === "Hourly" && e.hourlyRate ? `Hourly ${i(Number(e.hourlyRate))}/hr` : e.wageType, l = m.contractorPayments || [], u = x(() => l.length === 0 ? { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 } : l.reduce(
+  const { t } = T("Contractor.Payments.PaymentSummary"), n = H(), N = (e) => e.wageType === "Hourly" && e.hourlyRate ? `Hourly ${n(Number(e.hourlyRate))}/hr` : e.wageType, i = m.contractorPayments || [], u = x(() => i.length === 0 ? { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 } : i.reduce(
     (e, o) => (e.wageAmount += Number(o.wage || "0"), e.bonusAmount += Number(o.bonus || "0"), e.reimbursementAmount += Number(o.reimbursement || "0"), e.totalAmount += Number(o.wageTotal || "0"), e),
     { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 }
-  ), [l]);
-  return /* @__PURE__ */ a(s, { flexDirection: "column", gap: 32, children: [
-    c.length > 0 && /* @__PURE__ */ n(s, { flexDirection: "column", gap: 16, children: c.map((e, o) => /* @__PURE__ */ n(
-      h,
+  ), [i]);
+  return /* @__PURE__ */ s(l, { flexDirection: "column", gap: 16, children: [
+    d.length > 0 && /* @__PURE__ */ r(l, { flexDirection: "column", gap: 16, children: d.map((e, o) => /* @__PURE__ */ r(
+      p,
       {
         label: t(`alerts.${e.title}`, e.translationParams),
         status: e.type,
@@ -38,94 +36,94 @@ const k = "0.000", Y = ({
       },
       `${e.type}-${e.title}-${o}`
     )) }),
-    /* @__PURE__ */ n(h, { status: "success", label: t("successTitle"), children: /* @__PURE__ */ n(r, { children: t("successMessage", {
-      count: l.length
+    /* @__PURE__ */ r(p, { status: "success", label: t("successTitle"), children: /* @__PURE__ */ r(b, { children: t("successMessage", {
+      count: i.length
     }) }) }),
-    d && /* @__PURE__ */ n($, { companyId: g, wireInId: d, onEvent: A }),
-    /* @__PURE__ */ a(s, { justifyContent: "space-between", alignItems: "flex-start", children: [
-      /* @__PURE__ */ a(s, { flexDirection: "column", gap: 2, children: [
-        /* @__PURE__ */ n(w, { as: "h2", children: t("summaryTitle") }),
-        /* @__PURE__ */ n(r, { variant: "supporting", children: t("summarySubtitle", { debitDate: m.debitDate }) })
+    a && /* @__PURE__ */ r($, { companyId: g, wireInId: a, onEvent: A }),
+    /* @__PURE__ */ s(l, { justifyContent: "space-between", alignItems: "flex-start", children: [
+      /* @__PURE__ */ s(l, { flexDirection: "column", gap: 2, children: [
+        /* @__PURE__ */ r(w, { as: "h2", children: t("summaryTitle") }),
+        /* @__PURE__ */ r(b, { variant: "supporting", children: t("summarySubtitle", { debitDate: m.debitDate }) })
       ] }),
-      /* @__PURE__ */ n(D, { onClick: f, variant: "primary", children: t("doneCta") })
+      /* @__PURE__ */ r(D, { onClick: f, variant: "primary", children: t("doneCta") })
     ] }),
-    /* @__PURE__ */ n(
-      b,
+    /* @__PURE__ */ r(
+      c,
       {
         columns: [
           {
             title: t("totalAmount"),
-            render: () => /* @__PURE__ */ n(r, { children: i(Number(m.totals?.amount || "0")) })
+            render: () => n(Number(m.totals?.amount || "0"))
           },
           {
             title: t("debitAmount"),
-            render: () => /* @__PURE__ */ n(r, { children: i(Number(m.totals?.debitAmount || "0")) })
+            render: () => n(Number(m.totals?.debitAmount || "0"))
           },
           {
             title: t("debitAccount"),
-            render: () => /* @__PURE__ */ n(r, { children: y?.hiddenAccountNumber ?? t("notAvailable") })
+            render: () => y?.hiddenAccountNumber ?? t("notAvailable")
           },
           {
             title: t("debitDate"),
-            render: () => /* @__PURE__ */ n(r, { children: m.debitDate || t("notAvailable") })
+            render: () => m.debitDate || t("notAvailable")
           },
           {
             title: t("contractorPayDate"),
-            render: () => /* @__PURE__ */ n(r, { children: m.checkDate || t("notAvailable") })
+            render: () => m.checkDate || t("notAvailable")
           }
         ],
         data: [m],
         label: t("paymentSummaryTitle")
       }
     ),
-    l.length > 0 && /* @__PURE__ */ n(
-      b,
+    i.length > 0 && /* @__PURE__ */ r(
+      c,
       {
         columns: [
           {
             title: t("contractor"),
-            render: (e) => /* @__PURE__ */ n(r, { children: C(
-              p.find(
+            render: (e) => C(
+              h.find(
                 (o) => o.uuid === e.contractorUuid
               )
-            ) })
+            )
           },
           {
             title: t("wageType"),
-            render: (e) => /* @__PURE__ */ n(r, { children: N(e) })
+            render: (e) => N(e)
           },
           {
             title: t("paymentMethod"),
-            render: (e) => /* @__PURE__ */ n(r, { children: e.paymentMethod === "Direct Deposit" ? t("paymentMethods.directDeposit") : e.paymentMethod === "Check" ? t("paymentMethods.check") : e.paymentMethod || t("notAvailable") })
+            render: (e) => e.paymentMethod === "Direct Deposit" ? t("paymentMethods.directDeposit") : e.paymentMethod === "Check" ? t("paymentMethods.check") : e.paymentMethod || t("notAvailable")
           },
           {
             title: t("hours"),
-            render: (e) => /* @__PURE__ */ n(r, { children: e.wageType === "Hourly" && e.hours ? v(parseFloat(e.hours)) : k })
+            render: (e) => e.wageType === "Hourly" && e.hours ? v(parseFloat(e.hours)) : k
           },
           {
             title: t("wage"),
-            render: (e) => /* @__PURE__ */ n(r, { children: i(Number(e.wage || "0")) })
+            render: (e) => n(Number(e.wage || "0"))
           },
           {
             title: t("bonus"),
-            render: (e) => /* @__PURE__ */ n(r, { children: i(Number(e.bonus || "0")) })
+            render: (e) => n(Number(e.bonus || "0"))
           },
           {
             title: t("reimbursement"),
-            render: (e) => /* @__PURE__ */ n(r, { children: i(Number(e.reimbursement || "0")) })
+            render: (e) => n(Number(e.reimbursement || "0"))
           },
           {
             title: t("total"),
-            render: (e) => /* @__PURE__ */ n(r, { children: i(Number(e.wageTotal || "0")) })
+            render: (e) => n(Number(e.wageTotal || "0"))
           }
         ],
-        data: l,
+        data: i,
         footer: () => ({
-          "column-0": /* @__PURE__ */ n(r, { weight: "bold", children: t("totalsLabel") }),
-          "column-4": /* @__PURE__ */ n(r, { children: i(u.wageAmount || 0) }),
-          "column-5": /* @__PURE__ */ n(r, { children: i(u.bonusAmount || 0) }),
-          "column-6": /* @__PURE__ */ n(r, { children: i(u.reimbursementAmount || 0) }),
-          "column-7": /* @__PURE__ */ n(r, { children: i(u.totalAmount || 0) })
+          "column-0": t("totalsLabel"),
+          "column-4": n(u.wageAmount || 0),
+          "column-5": n(u.bonusAmount || 0),
+          "column-6": n(u.reimbursementAmount || 0),
+          "column-7": n(u.totalAmount || 0)
         }),
         label: t("contractorPaymentsTitle")
       }
@@ -133,6 +131,6 @@ const k = "0.000", Y = ({
   ] });
 };
 export {
-  Y as PaymentSummaryPresentation
+  U as PaymentSummaryPresentation
 };
 //# sourceMappingURL=PaymentSummaryPresentation.js.map

package/dist/components/Contractor/Payments/PaymentSummary/PaymentSummaryPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentSummaryPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentSummary/PaymentSummaryPresentation.tsx"],"sourcesContent":["import { 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 { useMemo } from 'react'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport type { CompanyBankAccount } from '@gusto/embedded-api/models/components/companybankaccount'\nimport type { InternalAlert } from '../types'\nimport { getContractorDisplayName } from '../CreatePayment/helpers'\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 { ConfirmWireDetails } from '@/components/Payroll/ConfirmWireDetails'\nimport type { EventType } from '@/shared/constants'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface PaymentSummaryPresentationProps {\n  contractorPaymentGroup: ContractorPaymentGroup\n  contractors: Contractor[]\n  bankAccount?: CompanyBankAccount\n  companyId: string\n  wireInRequestUuid?: string\n  onEvent: (type: EventType, data?: unknown) => void\n  onDone: () => void\n  alerts?: InternalAlert[]\n}\n\nexport const PaymentSummaryPresentation = ({\n  contractorPaymentGroup,\n  contractors,\n  bankAccount,\n  companyId,\n  wireInRequestUuid,\n  onEvent,\n  onDone,\n  alerts = [],\n}: PaymentSummaryPresentationProps) => {\n  const { Button, Text, Heading, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentSummary')\n  const { t } = useTranslation('Contractor.Payments.PaymentSummary')\n  const currencyFormatter = useNumberFormatter()\n\n  const formatWageType = (contractor: ContractorPaymentForGroup) => {\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `Hourly ${currencyFormatter(Number(contractor.hourlyRate))}/hr`\n    }\n    return contractor.wageType\n  }\n\n  const contractorPayments = contractorPaymentGroup.contractorPayments || []\n\n  const totals = useMemo(() => {\n    if (contractorPayments.length === 0) {\n      return { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 }\n    }\n    return 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  }, [contractorPayments])\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      {alerts.length > 0 && (\n        <Flex flexDirection=\"column\" gap={16}>\n          {alerts.map((alert, index) => (\n            <Alert\n              key={`${alert.type}-${alert.title}-${index}`}\n              label={t(`alerts.${alert.title}` as never, alert.translationParams)}\n              status={alert.type}\n              onDismiss={alert.onDismiss}\n            >\n              {typeof alert.content === 'string'\n                ? t(`alerts.${alert.content}` as never)\n                : (alert.content ?? null)}\n            </Alert>\n          ))}\n        </Flex>\n      )}\n\n      <Alert status=\"success\" label={t('successTitle')}>\n        <Text>\n          {t('successMessage', {\n            count: contractorPayments.length,\n          })}\n        </Text>\n      </Alert>\n\n      {wireInRequestUuid && (\n        <ConfirmWireDetails companyId={companyId} wireInId={wireInRequestUuid} onEvent={onEvent} />\n      )}\n\n      <Flex justifyContent=\"space-between\" alignItems=\"flex-start\">\n        <Flex flexDirection=\"column\" gap={2}>\n          <Heading as=\"h2\">{t('summaryTitle')}</Heading>\n          <Text variant=\"supporting\">\n            {t('summarySubtitle', { debitDate: contractorPaymentGroup.debitDate })}\n          </Text>\n        </Flex>\n        <Button onClick={onDone} variant=\"primary\">\n          {t('doneCta')}\n        </Button>\n      </Flex>\n\n      {/* Payment Summary Table */}\n      <DataView\n        columns={[\n          {\n            title: t('totalAmount'),\n            render: () => (\n              <Text>{currencyFormatter(Number(contractorPaymentGroup.totals?.amount || '0'))}</Text>\n            ),\n          },\n          {\n            title: t('debitAmount'),\n            render: () => (\n              <Text>\n                {currencyFormatter(Number(contractorPaymentGroup.totals?.debitAmount || '0'))}\n              </Text>\n            ),\n          },\n          {\n            title: t('debitAccount'),\n            render: () => <Text>{bankAccount?.hiddenAccountNumber ?? t('notAvailable')}</Text>,\n          },\n          {\n            title: t('debitDate'),\n            render: () => <Text>{contractorPaymentGroup.debitDate || t('notAvailable')}</Text>,\n          },\n          {\n            title: t('contractorPayDate'),\n            render: () => <Text>{contractorPaymentGroup.checkDate || t('notAvailable')}</Text>,\n          },\n        ]}\n        data={[contractorPaymentGroup]}\n        label={t('paymentSummaryTitle')}\n      />\n\n      {/* Contractor Payments Table */}\n      {contractorPayments.length > 0 && (\n        <DataView\n          columns={[\n            {\n              title: t('contractor'),\n              render: contractorPayment => (\n                <Text>\n                  {getContractorDisplayName(\n                    contractors.find(\n                      contractor => contractor.uuid === contractorPayment.contractorUuid,\n                    ),\n                  )}\n                </Text>\n              ),\n            },\n            {\n              title: t('wageType'),\n              render: contractorPayment => <Text>{formatWageType(contractorPayment)}</Text>,\n            },\n            {\n              title: t('paymentMethod'),\n              render: contractorPayment => (\n                <Text>\n                  {contractorPayment.paymentMethod === 'Direct Deposit'\n                    ? t('paymentMethods.directDeposit')\n                    : contractorPayment.paymentMethod === 'Check'\n                      ? t('paymentMethods.check')\n                      : contractorPayment.paymentMethod || t('notAvailable')}\n                </Text>\n              ),\n            },\n            {\n              title: t('hours'),\n              render: contractorPayment => (\n                <Text>\n                  {contractorPayment.wageType === 'Hourly' && contractorPayment.hours\n                    ? formatHoursDisplay(parseFloat(contractorPayment.hours))\n                    : ZERO_HOURS_DISPLAY}\n                </Text>\n              ),\n            },\n            {\n              title: t('wage'),\n              render: contractorPayment => (\n                <Text>{currencyFormatter(Number(contractorPayment.wage || '0'))}</Text>\n              ),\n            },\n            {\n              title: t('bonus'),\n              render: contractorPayment => (\n                <Text>{currencyFormatter(Number(contractorPayment.bonus || '0'))}</Text>\n              ),\n            },\n            {\n              title: t('reimbursement'),\n              render: contractorPayment => (\n                <Text>{currencyFormatter(Number(contractorPayment.reimbursement || '0'))}</Text>\n              ),\n            },\n            {\n              title: t('total'),\n              render: contractorPayment => (\n                <Text>{currencyFormatter(Number(contractorPayment.wageTotal || '0'))}</Text>\n              ),\n            },\n          ]}\n          data={contractorPayments}\n          footer={() => ({\n            'column-0': <Text weight=\"bold\">{t('totalsLabel')}</Text>,\n            'column-4': <Text>{currencyFormatter(totals.wageAmount || 0)}</Text>,\n            'column-5': <Text>{currencyFormatter(totals.bonusAmount || 0)}</Text>,\n            'column-6': <Text>{currencyFormatter(totals.reimbursementAmount || 0)}</Text>,\n            'column-7': <Text>{currencyFormatter(totals.totalAmount || 0)}</Text>,\n          })}\n          label={t('contractorPaymentsTitle')}\n        />\n      )}\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","PaymentSummaryPresentation","contractorPaymentGroup","contractors","bankAccount","companyId","wireInRequestUuid","onEvent","onDone","alerts","Button","Text","Heading","Alert","useComponentContext","useI18n","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","contractorPayments","totals","useMemo","acc","jsxs","Flex","jsx","alert","index","ConfirmWireDetails","DataView","contractorPayment","getContractorDisplayName","formatHoursDisplay"],"mappings":"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"}
+{"version":3,"file":"PaymentSummaryPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentSummary/PaymentSummaryPresentation.tsx"],"sourcesContent":["import { 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 { useMemo } from 'react'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport type { CompanyBankAccount } from '@gusto/embedded-api/models/components/companybankaccount'\nimport type { InternalAlert } from '../types'\nimport { getContractorDisplayName } from '../CreatePayment/helpers'\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 { ConfirmWireDetails } from '@/components/Payroll/ConfirmWireDetails'\nimport type { EventType } from '@/shared/constants'\n\nconst ZERO_HOURS_DISPLAY = '0.000'\n\ninterface PaymentSummaryPresentationProps {\n  contractorPaymentGroup: ContractorPaymentGroup\n  contractors: Contractor[]\n  bankAccount?: CompanyBankAccount\n  companyId: string\n  wireInRequestUuid?: string\n  onEvent: (type: EventType, data?: unknown) => void\n  onDone: () => void\n  alerts?: InternalAlert[]\n}\n\nexport const PaymentSummaryPresentation = ({\n  contractorPaymentGroup,\n  contractors,\n  bankAccount,\n  companyId,\n  wireInRequestUuid,\n  onEvent,\n  onDone,\n  alerts = [],\n}: PaymentSummaryPresentationProps) => {\n  const { Button, Text, Heading, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentSummary')\n  const { t } = useTranslation('Contractor.Payments.PaymentSummary')\n  const currencyFormatter = useNumberFormatter()\n\n  const formatWageType = (contractor: ContractorPaymentForGroup) => {\n    if (contractor.wageType === 'Hourly' && contractor.hourlyRate) {\n      return `Hourly ${currencyFormatter(Number(contractor.hourlyRate))}/hr`\n    }\n    return contractor.wageType\n  }\n\n  const contractorPayments = contractorPaymentGroup.contractorPayments || []\n\n  const totals = useMemo(() => {\n    if (contractorPayments.length === 0) {\n      return { wageAmount: 0, bonusAmount: 0, reimbursementAmount: 0, totalAmount: 0 }\n    }\n    return 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  }, [contractorPayments])\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {alerts.length > 0 && (\n        <Flex flexDirection=\"column\" gap={16}>\n          {alerts.map((alert, index) => (\n            <Alert\n              key={`${alert.type}-${alert.title}-${index}`}\n              label={t(`alerts.${alert.title}` as never, alert.translationParams)}\n              status={alert.type}\n              onDismiss={alert.onDismiss}\n            >\n              {typeof alert.content === 'string'\n                ? t(`alerts.${alert.content}` as never)\n                : (alert.content ?? null)}\n            </Alert>\n          ))}\n        </Flex>\n      )}\n\n      <Alert status=\"success\" label={t('successTitle')}>\n        <Text>\n          {t('successMessage', {\n            count: contractorPayments.length,\n          })}\n        </Text>\n      </Alert>\n\n      {wireInRequestUuid && (\n        <ConfirmWireDetails companyId={companyId} wireInId={wireInRequestUuid} onEvent={onEvent} />\n      )}\n\n      <Flex justifyContent=\"space-between\" alignItems=\"flex-start\">\n        <Flex flexDirection=\"column\" gap={2}>\n          <Heading as=\"h2\">{t('summaryTitle')}</Heading>\n          <Text variant=\"supporting\">\n            {t('summarySubtitle', { debitDate: contractorPaymentGroup.debitDate })}\n          </Text>\n        </Flex>\n        <Button onClick={onDone} variant=\"primary\">\n          {t('doneCta')}\n        </Button>\n      </Flex>\n\n      {/* Payment Summary Table */}\n      <DataView\n        columns={[\n          {\n            title: t('totalAmount'),\n            render: () => currencyFormatter(Number(contractorPaymentGroup.totals?.amount || '0')),\n          },\n          {\n            title: t('debitAmount'),\n            render: () =>\n              currencyFormatter(Number(contractorPaymentGroup.totals?.debitAmount || '0')),\n          },\n          {\n            title: t('debitAccount'),\n            render: () => bankAccount?.hiddenAccountNumber ?? t('notAvailable'),\n          },\n          {\n            title: t('debitDate'),\n            render: () => contractorPaymentGroup.debitDate || t('notAvailable'),\n          },\n          {\n            title: t('contractorPayDate'),\n            render: () => contractorPaymentGroup.checkDate || t('notAvailable'),\n          },\n        ]}\n        data={[contractorPaymentGroup]}\n        label={t('paymentSummaryTitle')}\n      />\n\n      {/* Contractor Payments Table */}\n      {contractorPayments.length > 0 && (\n        <DataView\n          columns={[\n            {\n              title: t('contractor'),\n              render: contractorPayment =>\n                getContractorDisplayName(\n                  contractors.find(\n                    contractor => contractor.uuid === contractorPayment.contractorUuid,\n                  ),\n                ),\n            },\n            {\n              title: t('wageType'),\n              render: contractorPayment => formatWageType(contractorPayment),\n            },\n            {\n              title: t('paymentMethod'),\n              render: contractorPayment =>\n                contractorPayment.paymentMethod === 'Direct Deposit'\n                  ? t('paymentMethods.directDeposit')\n                  : contractorPayment.paymentMethod === 'Check'\n                    ? t('paymentMethods.check')\n                    : contractorPayment.paymentMethod || t('notAvailable'),\n            },\n            {\n              title: t('hours'),\n              render: contractorPayment =>\n                contractorPayment.wageType === 'Hourly' && contractorPayment.hours\n                  ? formatHoursDisplay(parseFloat(contractorPayment.hours))\n                  : ZERO_HOURS_DISPLAY,\n            },\n            {\n              title: t('wage'),\n              render: contractorPayment => currencyFormatter(Number(contractorPayment.wage || '0')),\n            },\n            {\n              title: t('bonus'),\n              render: contractorPayment =>\n                currencyFormatter(Number(contractorPayment.bonus || '0')),\n            },\n            {\n              title: t('reimbursement'),\n              render: contractorPayment =>\n                currencyFormatter(Number(contractorPayment.reimbursement || '0')),\n            },\n            {\n              title: t('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('contractorPaymentsTitle')}\n        />\n      )}\n    </Flex>\n  )\n}\n"],"names":["ZERO_HOURS_DISPLAY","PaymentSummaryPresentation","contractorPaymentGroup","contractors","bankAccount","companyId","wireInRequestUuid","onEvent","onDone","alerts","Button","Text","Heading","Alert","useComponentContext","useI18n","useTranslation","currencyFormatter","useNumberFormatter","formatWageType","contractor","contractorPayments","totals","useMemo","acc","jsxs","Flex","jsx","alert","index","ConfirmWireDetails","DataView","contractorPayment","getContractorDisplayName","formatHoursDisplay"],"mappings":"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"}