@gusto/embedded-react-sdk 0.24.0 → 0.25.0

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentHistoryPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentHistory/PaymentHistoryPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { DataView, Flex, EmptyData, ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useI18n } from '@/i18n'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useLocale } from '@/contexts/LocaleProvider/useLocale'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\n\ninterface PaymentData {\n  id: string\n  name: string\n  wageType: string\n  paymentMethod: string\n  hours: number\n  wage: string\n  bonus: number\n  reimbursement: number\n  total: number\n}\n\ninterface PaymentHistoryPresentationProps {\n  date: string\n  payments: PaymentData[]\n  onBack: () => void\n  onViewPayment: (paymentId: string) => void\n  onCancelPayment: (paymentId: string) => void\n}\n\nexport const PaymentHistoryPresentation = ({\n  date,\n  payments,\n  onBack,\n  onViewPayment,\n  onCancelPayment,\n}: PaymentHistoryPresentationProps) => {\n  const { Button, Text, Heading } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentHistory')\n  const { t } = useTranslation('Contractor.Payments.PaymentHistory')\n  const { locale } = useLocale()\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex flexDirection=\"column\" gap={8}>\n        <Heading as=\"h1\">{t('title')}</Heading>\n        <Text>{t('subtitle', { date })}</Text>\n      </Flex>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h2\">{t('paymentsSection')}</Heading>\n\n        {payments.length === 0 ? (\n          <EmptyData title={t('noPaymentsFound')} description={t('noPaymentsDescription')}>\n            <ActionsLayout justifyContent=\"center\">\n              <Button variant=\"primary\" onClick={onBack}>\n                {t('backButton')}\n              </Button>\n            </ActionsLayout>\n          </EmptyData>\n        ) : (\n          <>\n            <DataView\n              columns={[\n                {\n                  title: t('tableHeaders.contractor'),\n                  render: ({ name, id }) => (\n                    <Button\n                      variant=\"tertiary\"\n                      onClick={() => {\n                        onViewPayment(id)\n                      }}\n                    >\n                      {name}\n                    </Button>\n                  ),\n                },\n                {\n                  title: t('tableHeaders.wageType'),\n                  render: ({ wageType }) => <Text>{wageType}</Text>,\n                },\n                {\n                  title: t('tableHeaders.paymentMethod'),\n                  render: ({ paymentMethod }) => <Text>{paymentMethod}</Text>,\n                },\n                {\n                  title: t('tableHeaders.hours'),\n                  render: ({ hours }) => <Text>{hours ? formatHoursDisplay(hours) : '–'}</Text>,\n                },\n                {\n                  title: t('tableHeaders.wage'),\n                  render: ({ wage }) => <Text>{wage || '–'}</Text>,\n                },\n                {\n                  title: t('tableHeaders.bonus'),\n                  render: ({ bonus }) => (\n                    <Text>{bonus ? formatNumberAsCurrency(bonus, locale) : '–'}</Text>\n                  ),\n                },\n                {\n                  title: t('tableHeaders.reimbursements'),\n                  render: ({ reimbursement }) => (\n                    <Text>{formatNumberAsCurrency(reimbursement, locale)}</Text>\n                  ),\n                },\n                {\n                  title: t('tableHeaders.total'),\n                  render: ({ total }) => <Text>{formatNumberAsCurrency(total, locale)}</Text>,\n                },\n                {\n                  title: t('tableHeaders.action'),\n                  render: ({ id, name }) => (\n                    <HamburgerMenu\n                      items={[\n                        {\n                          label: t('actions.view'),\n                          onClick: () => {\n                            onViewPayment(id)\n                          },\n                        },\n                        {\n                          label: t('actions.cancel'),\n                          onClick: () => {\n                            onCancelPayment(id)\n                          },\n                        },\n                      ]}\n                      triggerLabel={t('tableHeaders.action')}\n                    />\n                  ),\n                },\n              ]}\n              data={payments}\n              label={t('title')}\n            />\n\n            <Flex>\n              <Button onClick={onBack} variant=\"secondary\">\n                {t('backButton')}\n              </Button>\n            </Flex>\n          </>\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["PaymentHistoryPresentation","date","payments","onBack","onViewPayment","onCancelPayment","Button","Text","Heading","useComponentContext","useI18n","t","useTranslation","locale","useLocale","jsxs","Flex","jsx","EmptyData","ActionsLayout","Fragment","DataView","name","id","wageType","paymentMethod","hours","formatHoursDisplay","wage","bonus","formatNumberAsCurrency","reimbursement","total","HamburgerMenu"],"mappings":"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"}
+{"version":3,"file":"PaymentHistoryPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentHistory/PaymentHistoryPresentation.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroup } from '@gusto/embedded-api/models/components/contractorpaymentgroup'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { getContractorDisplayName } from '../CreatePayment/helpers'\nimport styles from './PaymentHistoryPresentation.module.scss'\nimport { DataView, Flex, EmptyData } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport EyeIcon from '@/assets/icons/eye.svg?react'\nimport CancelIcon from '@/assets/icons/slash-circle.svg?react'\n\ninterface PaymentHistoryPresentationProps {\n  paymentGroup: ContractorPaymentGroup\n  contractors: Contractor[]\n  onViewPayment: (paymentId: string) => void\n  onCancelPayment: (paymentId: string) => void\n  isCancelling: boolean\n}\n\nexport const PaymentHistoryPresentation = ({\n  paymentGroup,\n  contractors,\n  onViewPayment,\n  onCancelPayment,\n  isCancelling,\n}: PaymentHistoryPresentationProps) => {\n  const { Button, Text, Heading } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentHistory')\n  const { t } = useTranslation('Contractor.Payments.PaymentHistory')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const payments = paymentGroup.contractorPayments || []\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex flexDirection=\"column\" gap={8}>\n        <Heading as=\"h2\">{t('title')}</Heading>\n        <Text>\n          <Trans\n            i18nKey={'subtitle'}\n            t={t}\n            values={{ date: formatLongWithYear(paymentGroup.debitDate) }}\n            components={{\n              strong: <Text weight=\"bold\" as=\"span\" />,\n            }}\n          />\n        </Text>\n      </Flex>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h2\">{t('paymentsSection')}</Heading>\n\n        {payments.length === 0 ? (\n          <EmptyData title={t('noPaymentsFound')} description={t('noPaymentsDescription')} />\n        ) : (\n          <>\n            <DataView\n              columns={[\n                {\n                  title: t('tableHeaders.contractor'),\n                  render: ({ contractorUuid }) => (\n                    <Button\n                      variant=\"tertiary\"\n                      onClick={() => {\n                        onViewPayment(contractorUuid!)\n                      }}\n                    >\n                      {getContractorDisplayName(\n                        contractors.find(contractor => contractor.uuid === contractorUuid),\n                      )}\n                    </Button>\n                  ),\n                },\n                {\n                  title: t('tableHeaders.wageType'),\n                  render: ({ wageType }) => <Text>{wageType}</Text>,\n                },\n                {\n                  title: t('tableHeaders.paymentMethod'),\n                  render: ({ paymentMethod }) => <Text>{paymentMethod}</Text>,\n                },\n                {\n                  title: t('tableHeaders.hours'),\n                  render: ({ hours }) => (\n                    <Text>{hours ? formatHoursDisplay(Number(hours)) : '–'}</Text>\n                  ),\n                },\n                {\n                  title: t('tableHeaders.wage'),\n                  render: ({ wage }) => <Text>{wage || '–'}</Text>,\n                },\n                {\n                  title: t('tableHeaders.bonus'),\n                  render: ({ bonus }) => (\n                    <Text>{bonus ? currencyFormatter(Number(bonus)) : '–'}</Text>\n                  ),\n                },\n                {\n                  title: t('tableHeaders.reimbursements'),\n                  render: ({ reimbursement }) => (\n                    <Text>{reimbursement ? currencyFormatter(Number(reimbursement)) : '–'}</Text>\n                  ),\n                },\n                {\n                  title: t('tableHeaders.total'),\n                  render: ({ wageTotal, reimbursement, bonus }) => (\n                    <Text>\n                      {wageTotal\n                        ? currencyFormatter(\n                            Number(wageTotal) + Number(reimbursement) + Number(bonus),\n                          )\n                        : '–'}\n                    </Text>\n                  ),\n                },\n              ]}\n              itemMenu={({ contractorUuid, mayCancel, uuid }) => {\n                const items = [\n                  {\n                    label: t('actions.view'),\n                    onClick: () => {\n                      onViewPayment(contractorUuid!)\n                    },\n                    icon: (\n                      <span className={styles.icon}>\n                        <EyeIcon aria-hidden />\n                      </span>\n                    ),\n                  },\n                ]\n                if (mayCancel) {\n                  items.push({\n                    label: t('actions.cancel'),\n                    onClick: () => {\n                      onCancelPayment(uuid!)\n                    },\n                    icon: (\n                      <span className={styles.icon}>\n                        <CancelIcon aria-hidden />\n                      </span>\n                    ),\n                  })\n                }\n                return (\n                  <HamburgerMenu\n                    items={items}\n                    triggerLabel={t('tableHeaders.action')}\n                    isLoading={isCancelling}\n                  />\n                )\n              }}\n              data={payments}\n              label={t('title')}\n            />\n          </>\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["PaymentHistoryPresentation","paymentGroup","contractors","onViewPayment","onCancelPayment","isCancelling","Button","Text","Heading","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","payments","jsxs","Flex","jsx","Trans","EmptyData","Fragment","DataView","contractorUuid","getContractorDisplayName","contractor","wageType","paymentMethod","hours","formatHoursDisplay","wage","bonus","reimbursement","wageTotal","mayCancel","uuid","items","styles","EyeIcon","CancelIcon","HamburgerMenu"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+const o = "_icon_1h0yv_1", c = {
+  icon: o
+};
+export {
+  c as default,
+  o as icon
+};
+//# sourceMappingURL=PaymentHistoryPresentation.module.scss.js.map

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

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

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

@@ -0,0 +1,8 @@
+import { BaseComponentInterface } from '../../../Base';
+interface PaymentStatementProps extends BaseComponentInterface<'Contractor.Payments.PaymentStatement'> {
+    paymentGroupId: string;
+    contractorUuid: string;
+}
+export declare function PaymentStatement(props: PaymentStatementProps): import("react/jsx-runtime").JSX.Element;
+export declare const Root: ({ paymentGroupId, contractorUuid, dictionary }: PaymentStatementProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentStatement.js","sources":["../../../../../src/components/Contractor/Payments/PaymentStatement/PaymentStatement.tsx"],"sourcesContent":["import { useContractorPaymentGroupsGetSuspense } from '@gusto/embedded-api/react-query/contractorPaymentGroupsGet'\nimport { useContractorsListSuspense } from '@gusto/embedded-api/react-query/contractorsList'\nimport { useContractorPaymentsGetReceipt } from '@gusto/embedded-api/react-query/contractorPaymentsGetReceipt'\nimport { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport { useTranslation } from 'react-i18next'\nimport { PaymentStatementPresentation } from './PaymentStatementPresentation'\nimport { useComponentDictionary } from '@/i18n'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\n\ninterface PaymentStatementProps extends BaseComponentInterface<'Contractor.Payments.PaymentStatement'> {\n  paymentGroupId: string\n  contractorUuid: string\n}\n\nexport function PaymentStatement(props: PaymentStatementProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({ paymentGroupId, contractorUuid, dictionary }: PaymentStatementProps) => {\n  useComponentDictionary('Contractor.Payments.PaymentStatement', dictionary)\n  const { t } = useTranslation('Contractor.Payments.PaymentStatement')\n  // Fetching entire payment\n  const { data: paymentGroupResponse } = useContractorPaymentGroupsGetSuspense({\n    contractorPaymentGroupUuid: paymentGroupId,\n  })\n\n  if (!paymentGroupResponse.contractorPaymentGroup) {\n    throw new Error(t('errors.paymentGroupNotFound'))\n  }\n\n  const companyId = paymentGroupResponse.contractorPaymentGroup.companyUuid!\n  // Fetching all contractors for the company\n  const { data: contractorList } = useContractorsListSuspense({ companyUuid: companyId })\n  const contractors = contractorList.contractorList || []\n  // Locating the payment for the selectedcontractor\n  const payment = paymentGroupResponse.contractorPaymentGroup.contractorPayments?.find(\n    p => p.contractorUuid === contractorUuid,\n  )\n\n  if (!payment) {\n    throw new Error(t('errors.paymentNotFound'))\n  }\n  // Attempting to fetch the payment receipt\n  // Note: 404 is expected for receipts that aren't available (e.g., non-direct deposit or not yet funded)\n  const { data: paymentResponse } = useContractorPaymentsGetReceipt(\n    {\n      contractorPaymentUuid: payment.uuid!,\n    },\n    {\n      retry: false,\n      throwOnError: (error: Error) => {\n        // Ignore 404 errors (receipt not available), but throw other errors\n        if (error instanceof APIError && error.httpMeta.response.status === 404) {\n          return false\n        }\n        return true\n      },\n    },\n  )\n  const contractor = contractors.find(c => c.uuid === contractorUuid)\n  if (!contractor) {\n    throw new Error(t('errors.contractorNotFound'))\n  }\n\n  return (\n    <PaymentStatementPresentation\n      payment={payment}\n      contractor={contractor}\n      paymentReceipt={paymentResponse?.contractorPaymentReceipt}\n      checkDate={paymentGroupResponse.contractorPaymentGroup.checkDate || ''}\n    />\n  )\n}\n"],"names":["PaymentStatement","props","jsx","BaseComponent","Root","paymentGroupId","contractorUuid","dictionary","useComponentDictionary","t","useTranslation","paymentGroupResponse","useContractorPaymentGroupsGetSuspense","companyId","contractorList","useContractorsListSuspense","contractors","payment","p","paymentResponse","useContractorPaymentsGetReceipt","error","APIError","contractor","c","PaymentStatementPresentation"],"mappings":";;;;;;;;;;AAcO,SAASA,EAAiBC,GAA8B;AAC7D,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEO,MAAMG,IAAO,CAAC,EAAE,gBAAAC,GAAgB,gBAAAC,GAAgB,YAAAC,QAAwC;AAC7F,EAAAC,EAAuB,wCAAwCD,CAAU;AACzE,QAAM,EAAE,GAAAE,EAAA,IAAMC,EAAe,sCAAsC,GAE7D,EAAE,MAAMC,EAAA,IAAyBC,EAAsC;AAAA,IAC3E,4BAA4BP;AAAA,EAAA,CAC7B;AAED,MAAI,CAACM,EAAqB;AACxB,UAAM,IAAI,MAAMF,EAAE,6BAA6B,CAAC;AAGlD,QAAMI,IAAYF,EAAqB,uBAAuB,aAExD,EAAE,MAAMG,EAAA,IAAmBC,EAA2B,EAAE,aAAaF,GAAW,GAChFG,IAAcF,EAAe,kBAAkB,CAAA,GAE/CG,IAAUN,EAAqB,uBAAuB,oBAAoB;AAAA,IAC9E,CAAAO,MAAKA,EAAE,mBAAmBZ;AAAA,EAAA;AAG5B,MAAI,CAACW;AACH,UAAM,IAAI,MAAMR,EAAE,wBAAwB,CAAC;AAI7C,QAAM,EAAE,MAAMU,EAAA,IAAoBC;AAAA,IAChC;AAAA,MACE,uBAAuBH,EAAQ;AAAA,IAAA;AAAA,IAEjC;AAAA,MACE,OAAO;AAAA,MACP,cAAc,CAACI,MAET,EAAAA,aAAiBC,KAAYD,EAAM,SAAS,SAAS,WAAW;AAAA,IAItE;AAAA,EACF,GAEIE,IAAaP,EAAY,KAAK,CAAAQ,MAAKA,EAAE,SAASlB,CAAc;AAClE,MAAI,CAACiB;AACH,UAAM,IAAI,MAAMd,EAAE,2BAA2B,CAAC;AAGhD,SACE,gBAAAP;AAAA,IAACuB;AAAA,IAAA;AAAA,MACC,SAAAR;AAAA,MACA,YAAAM;AAAA,MACA,gBAAgBJ,GAAiB;AAAA,MACjC,WAAWR,EAAqB,uBAAuB,aAAa;AAAA,IAAA;AAAA,EAAA;AAG1E;"}

package/dist/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.d.ts

@@ -0,0 +1,11 @@
+import { ContractorPaymentForGroup } from '@gusto/embedded-api/models/components/contractorpaymentforgroup';
+import { Contractor } from '@gusto/embedded-api/models/components/contractor';
+import { ContractorPaymentReceipt } from '@gusto/embedded-api/models/components/contractorpaymentreceipt';
+interface PaymentStatementPresentationProps {
+    payment: ContractorPaymentForGroup;
+    contractor: Contractor;
+    paymentReceipt?: ContractorPaymentReceipt;
+    checkDate: string;
+}
+export declare const PaymentStatementPresentation: ({ payment, contractor, checkDate, paymentReceipt, }: PaymentStatementPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,157 @@
+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 { 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";
+const re = ({
+  payment: s,
+  contractor: c,
+  checkDate: k,
+  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 ? [
+    {
+      label: r("receipt.from"),
+      value: t.nameOfSender || ""
+    },
+    {
+      label: r("receipt.to"),
+      value: x(c)
+    },
+    {
+      label: r("receipt.debitDate"),
+      value: t.debitDate ? u(String(t.debitDate)) : ""
+    }
+  ] : [], [t, c, r, u]), P = v(() => {
+    const o = [
+      {
+        label: s.paymentMethod || "",
+        amount: l(D)
+      }
+    ];
+    return f && d > 0 ? o.push({
+      label: r("hoursLabel"),
+      amount: r("hoursAmount", {
+        hours: H(d),
+        rate: l(p)
+      })
+    }) : o.push({
+      label: r("wageLabel"),
+      amount: l(Number(s.wage || 0))
+    }), o.push({
+      label: r("bonus"),
+      amount: l(g)
+    }), o.push({
+      label: r("reimbursement"),
+      amount: l(N)
+    }), o;
+  }, [
+    s.paymentMethod,
+    D,
+    f,
+    d,
+    p,
+    g,
+    N,
+    r,
+    l,
+    s.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) })
+    ] }) }),
+    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: [
+          /* @__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("div", { className: i.receiptDetailsTable, children: /* @__PURE__ */ e(
+        w,
+        {
+          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
+        }
+      ) }),
+      /* @__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(
+          F,
+          {
+            i18nKey: "receipt.disclaimer",
+            t: r,
+            components: {
+              licensesLink: /* @__PURE__ */ e(I, { 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: [
+          B({
+            street1: t?.licensee?.address || "",
+            city: t?.licensee?.city || "",
+            state: t?.licensee?.state || "",
+            zip: t?.licensee?.postalCode || ""
+          }),
+          " | ",
+          K(t?.licensee?.phoneNumber)
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e(
+      w,
+      {
+        columns: [
+          {
+            title: r("debitedColumn"),
+            render: ({ label: o }) => /* @__PURE__ */ e(n, { children: o })
+          },
+          {
+            title: r("amountColumn"),
+            render: ({ amount: o }) => /* @__PURE__ */ e(n, { children: o || "" })
+          }
+        ],
+        data: P,
+        label: r("title", { contractorName: b })
+      }
+    )
+  ] });
+};
+export {
+  re as PaymentStatementPresentation
+};
+//# sourceMappingURL=PaymentStatementPresentation.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,22 @@
+const c = "_receiptCard_1rpnl_1", e = "_receiptIcon_1rpnl_12", t = "_checkmarkIcon_1rpnl_23", n = "_totalAmount_1rpnl_29", r = "_receiptDetailsTable_1rpnl_34", o = "_disclaimer_1rpnl_58", a = "_companyInfo_1rpnl_63", s = "_address_1rpnl_67", _ = {
+  receiptCard: c,
+  receiptIcon: e,
+  checkmarkIcon: t,
+  totalAmount: n,
+  receiptDetailsTable: r,
+  disclaimer: o,
+  companyInfo: a,
+  address: s
+};
+export {
+  s as address,
+  t as checkmarkIcon,
+  a as companyInfo,
+  _ as default,
+  o as disclaimer,
+  c as receiptCard,
+  r as receiptDetailsTable,
+  e as receiptIcon,
+  n as totalAmount
+};
+//# sourceMappingURL=PaymentStatementPresentation.module.scss.js.map

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

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

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

@@ -12,65 +12,62 @@ import { useI18n as A } from "../../../../i18n/I18n.js";
 import F from "../../../../hooks/useNumberFormatter.js";
 import R from "../../../../assets/icons/eye.svg.js";
 import { useDateFormatter as j } from "../../../../hooks/useDateFormatter.js";
-import { useDataView as S } from "../../../Common/DataView/useDataView.js";
-import { DataView as T } from "../../../Common/DataView/DataView.js";
+import { useDataView as M } from "../../../Common/DataView/useDataView.js";
+import { DataView as S } from "../../../Common/DataView/DataView.js";
 const Q = ({
   contractorPayments: d,
   numberOfMonths: p,
   onCreatePayment: o,
   onDateRangeChange: h,
   onViewPayment: y,
-  alerts: l = []
+  alerts: s = []
 }) => {
-  const { Button: s, Text: r, Heading: m, Select: b, ButtonIcon: f, Alert: g } = N();
+  const { Button: l, Text: r, Heading: m, Select: b, ButtonIcon: f, Alert: g } = N();
   A("Contractor.Payments.PaymentsList");
-  const { t } = x("Contractor.Payments.PaymentsList"), c = F("currency"), { formatLongWithYear: C } = j(), D = [
-    { value: "3", label: t("dateRanges.last3Months") },
-    { value: "6", label: t("dateRanges.last6Months") },
-    { value: "12", label: t("dateRanges.last12Months") }
-  ], { ...P } = S({
+  const { t: e } = x("Contractor.Payments.PaymentsList"), c = F("currency"), { formatLongWithYear: C } = j(), D = [
+    { value: "3", label: e("dateRanges.last3Months") },
+    { value: "6", label: e("dateRanges.last6Months") },
+    { value: "12", label: e("dateRanges.last12Months") }
+  ], { ...P } = M({
     data: d,
     columns: [
       {
-        title: t("paymentDateColumnLabel"),
-        render: ({ checkDate: e }) => /* @__PURE__ */ n(r, { weight: "semibold", variant: "supporting", children: C(e) || "N/A" })
+        title: e("paymentDateColumnLabel"),
+        render: ({ checkDate: t }) => /* @__PURE__ */ n(r, { weight: "semibold", variant: "supporting", children: C(t) || "N/A" })
       },
       {
-        title: t("reimbursementTotalColumnLabel"),
-        render: ({ totals: e }) => /* @__PURE__ */ n(r, { children: c(Number(e?.reimbursementAmount) || 0) })
+        title: e("wageTotalColumnLabel"),
+        render: ({ totals: t }) => /* @__PURE__ */ n(r, { children: c(Number(t?.wageAmount || 0)) })
       },
       {
-        title: t("wageTotalColumnLabel"),
-        render: ({ totals: e }) => /* @__PURE__ */ n(r, { children: c(Number(e?.wageAmount || 0)) })
-      },
-      {
-        title: t("actionColumnLabel"),
-        render: ({ uuid: e }) => /* @__PURE__ */ n(r, { children: /* @__PURE__ */ n(
-          f,
-          {
-            "aria-label": t("viewPaymentCta"),
-            variant: "tertiary",
-            onClick: () => {
-              y(e || "");
-            },
-            children: /* @__PURE__ */ n(R, { "aria-hidden": !0 })
-          }
-        ) })
+        title: e("reimbursementTotalColumnLabel"),
+        render: ({ totals: t }) => /* @__PURE__ */ n(r, { children: c(Number(t?.reimbursementAmount) || 0) })
       }
     ],
-    emptyState: () => /* @__PURE__ */ n(w, { title: t("noPaymentsFound"), description: t("noPaymentsDescription"), children: /* @__PURE__ */ n(L, { justifyContent: "center", children: /* @__PURE__ */ n(s, { variant: "primary", onClick: o, children: t("createPaymentCta") }) }) })
+    itemMenu: ({ uuid: t }) => /* @__PURE__ */ n(
+      f,
+      {
+        "aria-label": e("viewPaymentCta"),
+        variant: "tertiary",
+        onClick: () => {
+          y(t || "");
+        },
+        children: /* @__PURE__ */ n(R, { "aria-hidden": !0 })
+      }
+    ),
+    emptyState: () => /* @__PURE__ */ n(w, { title: e("noPaymentsFound"), description: e("noPaymentsDescription"), children: /* @__PURE__ */ n(L, { justifyContent: "center", children: /* @__PURE__ */ n(l, { variant: "primary", onClick: o, children: e("createPaymentCta") }) }) })
   });
   return /* @__PURE__ */ i(a, { flexDirection: "column", gap: 24, children: [
-    /* @__PURE__ */ n(a, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ n(m, { as: "h1", children: t("title") }) }),
-    l.length > 0 && /* @__PURE__ */ n(a, { flexDirection: "column", gap: 16, children: l.map((e, v) => /* @__PURE__ */ n(
+    /* @__PURE__ */ n(a, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ n(m, { as: "h1", children: e("title") }) }),
+    s.length > 0 && /* @__PURE__ */ n(a, { flexDirection: "column", gap: 16, children: s.map((t, v) => /* @__PURE__ */ n(
       g,
       {
-        label: t(`alerts.${e.title}`, e.translationParams),
-        status: e.type,
-        onDismiss: e.onDismiss,
-        children: e.content ?? null
+        label: e(`alerts.${t.title}`, t.translationParams),
+        status: t.type,
+        onDismiss: t.onDismiss,
+        children: t.content ?? null
       },
-      `${e.type}-${e.title}-${v}`
+      `${t.type}-${t.title}-${v}`
     )) }),
     /* @__PURE__ */ i(
       a,
@@ -86,28 +83,28 @@ const Q = ({
         },
         justifyContent: "space-between",
         children: [
-          /* @__PURE__ */ n(m, { as: "h2", children: t("subtitle") }),
+          /* @__PURE__ */ n(m, { as: "h2", children: e("subtitle") }),
           /* @__PURE__ */ i("div", { className: u.actionsContainer, children: [
             /* @__PURE__ */ n(
               b,
               {
                 id: "date-range-select",
                 value: p.toString(),
-                onChange: (e) => {
-                  h(Number(e));
+                onChange: (t) => {
+                  h(Number(t));
                 },
                 options: D,
                 isRequired: !0,
-                label: t("startDate"),
+                label: e("startDate"),
                 shouldVisuallyHideLabel: !0
               }
             ),
-            /* @__PURE__ */ n(s, { onClick: o, variant: "secondary", className: u.nowrap, children: t("createPaymentCta") })
+            /* @__PURE__ */ n(l, { onClick: o, variant: "secondary", className: u.nowrap, children: e("createPaymentCta") })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ n(T, { label: t("subtitle"), ...P })
+    /* @__PURE__ */ n(S, { label: e("subtitle"), ...P })
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentsListPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupWithBlockers } from '@gusto/embedded-api/models/components/contractorpaymentgroupwithblockers'\nimport type { InternalAlert } from '../types'\nimport styles from './PaymentsListPresentation.module.scss'\nimport { DataView, Flex, EmptyData, ActionsLayout, useDataView } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport EyeIcon from '@/assets/icons/eye.svg?react'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\n\ninterface ContractorPaymentPaymentsListPresentationProps {\n  numberOfMonths: number\n  contractorPayments: ContractorPaymentGroupWithBlockers[]\n  onCreatePayment: () => void\n  onDateRangeChange: (numberOfMonths: number) => void\n  onViewPayment: (paymentId: string) => void\n  alerts?: InternalAlert[]\n}\n\nexport const PaymentsListPresentation = ({\n  contractorPayments,\n  numberOfMonths,\n  onCreatePayment,\n  onDateRangeChange,\n  onViewPayment,\n  alerts = [],\n}: ContractorPaymentPaymentsListPresentationProps) => {\n  const { Button, Text, Heading, Select, ButtonIcon, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentsList')\n  const { t } = useTranslation('Contractor.Payments.PaymentsList')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const dateRangeOptions = [\n    { value: '3', label: t('dateRanges.last3Months') },\n    { value: '6', label: t('dateRanges.last6Months') },\n    { value: '12', label: t('dateRanges.last12Months') },\n  ]\n  const { ...dataViewProps } = useDataView({\n    data: contractorPayments,\n    columns: [\n      {\n        title: t('paymentDateColumnLabel'),\n        render: ({ checkDate }) => (\n          <Text weight=\"semibold\" variant=\"supporting\">\n            {formatLongWithYear(checkDate) || 'N/A'}\n          </Text>\n        ),\n      },\n      {\n        title: t('reimbursementTotalColumnLabel'),\n        render: ({ totals }) => (\n          <Text>{currencyFormatter(Number(totals?.reimbursementAmount) || 0)}</Text>\n        ),\n      },\n      {\n        title: t('wageTotalColumnLabel'),\n        render: ({ totals }) => <Text>{currencyFormatter(Number(totals?.wageAmount || 0))}</Text>,\n      },\n      {\n        title: t('actionColumnLabel'),\n        render: ({ uuid }) => (\n          <Text>\n            <ButtonIcon\n              aria-label={t('viewPaymentCta')}\n              variant=\"tertiary\"\n              onClick={() => {\n                onViewPayment(uuid || '')\n              }}\n            >\n              <EyeIcon aria-hidden />\n            </ButtonIcon>\n          </Text>\n        ),\n      },\n    ],\n    emptyState: () => (\n      <EmptyData title={t('noPaymentsFound')} description={t('noPaymentsDescription')}>\n        <ActionsLayout justifyContent=\"center\">\n          <Button variant=\"primary\" onClick={onCreatePayment}>\n            {t('createPaymentCta')}\n          </Button>\n        </ActionsLayout>\n      </EmptyData>\n    ),\n  })\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h1\">{t('title')}</Heading>\n      </Flex>\n\n      {alerts.length > 0 && (\n        <Flex flexDirection=\"column\" gap={16}>\n          {alerts.map((alert, index) => (\n            <Alert\n              key={`${alert.type}-${alert.title}-${index}`}\n              label={t(`alerts.${alert.title}` as never, alert.translationParams)}\n              status={alert.type}\n              onDismiss={alert.onDismiss}\n            >\n              {alert.content ?? null}\n            </Alert>\n          ))}\n        </Flex>\n      )}\n\n      <Flex\n        flexDirection={{\n          base: 'column',\n          small: 'row',\n        }}\n        gap={16}\n        alignItems={{\n          base: 'stretch',\n          small: 'flex-end',\n        }}\n        justifyContent=\"space-between\"\n      >\n        <Heading as=\"h2\">{t('subtitle')}</Heading>\n        <div className={styles.actionsContainer}>\n          <Select\n            id=\"date-range-select\"\n            value={numberOfMonths.toString()}\n            onChange={value => {\n              onDateRangeChange(Number(value))\n            }}\n            options={dateRangeOptions}\n            isRequired\n            label={t('startDate')}\n            shouldVisuallyHideLabel\n          />\n          <Button onClick={onCreatePayment} variant=\"secondary\" className={styles.nowrap}>\n            {t('createPaymentCta')}\n          </Button>\n        </div>\n      </Flex>\n\n      <DataView label={t('subtitle')} {...dataViewProps} />\n    </Flex>\n  )\n}\n"],"names":["PaymentsListPresentation","contractorPayments","numberOfMonths","onCreatePayment","onDateRangeChange","onViewPayment","alerts","Button","Text","Heading","Select","ButtonIcon","Alert","useComponentContext","useI18n","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","dateRangeOptions","dataViewProps","useDataView","checkDate","jsx","totals","uuid","EyeIcon","EmptyData","ActionsLayout","jsxs","Flex","alert","index","styles","value","DataView"],"mappings":"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"}
+{"version":3,"file":"PaymentsListPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentsList/PaymentsListPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { ContractorPaymentGroupWithBlockers } from '@gusto/embedded-api/models/components/contractorpaymentgroupwithblockers'\nimport type { InternalAlert } from '../types'\nimport styles from './PaymentsListPresentation.module.scss'\nimport { DataView, Flex, EmptyData, ActionsLayout, useDataView } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport EyeIcon from '@/assets/icons/eye.svg?react'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\n\ninterface ContractorPaymentPaymentsListPresentationProps {\n  numberOfMonths: number\n  contractorPayments: ContractorPaymentGroupWithBlockers[]\n  onCreatePayment: () => void\n  onDateRangeChange: (numberOfMonths: number) => void\n  onViewPayment: (paymentId: string) => void\n  alerts?: InternalAlert[]\n}\n\nexport const PaymentsListPresentation = ({\n  contractorPayments,\n  numberOfMonths,\n  onCreatePayment,\n  onDateRangeChange,\n  onViewPayment,\n  alerts = [],\n}: ContractorPaymentPaymentsListPresentationProps) => {\n  const { Button, Text, Heading, Select, ButtonIcon, Alert } = useComponentContext()\n  useI18n('Contractor.Payments.PaymentsList')\n  const { t } = useTranslation('Contractor.Payments.PaymentsList')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const dateRangeOptions = [\n    { value: '3', label: t('dateRanges.last3Months') },\n    { value: '6', label: t('dateRanges.last6Months') },\n    { value: '12', label: t('dateRanges.last12Months') },\n  ]\n  const { ...dataViewProps } = useDataView({\n    data: contractorPayments,\n    columns: [\n      {\n        title: t('paymentDateColumnLabel'),\n        render: ({ checkDate }) => (\n          <Text weight=\"semibold\" variant=\"supporting\">\n            {formatLongWithYear(checkDate) || 'N/A'}\n          </Text>\n        ),\n      },\n      {\n        title: t('wageTotalColumnLabel'),\n        render: ({ totals }) => <Text>{currencyFormatter(Number(totals?.wageAmount || 0))}</Text>,\n      },\n      {\n        title: t('reimbursementTotalColumnLabel'),\n        render: ({ totals }) => (\n          <Text>{currencyFormatter(Number(totals?.reimbursementAmount) || 0)}</Text>\n        ),\n      },\n    ],\n    itemMenu: ({ uuid }) => (\n      <ButtonIcon\n        aria-label={t('viewPaymentCta')}\n        variant=\"tertiary\"\n        onClick={() => {\n          onViewPayment(uuid || '')\n        }}\n      >\n        <EyeIcon aria-hidden />\n      </ButtonIcon>\n    ),\n    emptyState: () => (\n      <EmptyData title={t('noPaymentsFound')} description={t('noPaymentsDescription')}>\n        <ActionsLayout justifyContent=\"center\">\n          <Button variant=\"primary\" onClick={onCreatePayment}>\n            {t('createPaymentCta')}\n          </Button>\n        </ActionsLayout>\n      </EmptyData>\n    ),\n  })\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Heading as=\"h1\">{t('title')}</Heading>\n      </Flex>\n\n      {alerts.length > 0 && (\n        <Flex flexDirection=\"column\" gap={16}>\n          {alerts.map((alert, index) => (\n            <Alert\n              key={`${alert.type}-${alert.title}-${index}`}\n              label={t(`alerts.${alert.title}` as never, alert.translationParams)}\n              status={alert.type}\n              onDismiss={alert.onDismiss}\n            >\n              {alert.content ?? null}\n            </Alert>\n          ))}\n        </Flex>\n      )}\n\n      <Flex\n        flexDirection={{\n          base: 'column',\n          small: 'row',\n        }}\n        gap={16}\n        alignItems={{\n          base: 'stretch',\n          small: 'flex-end',\n        }}\n        justifyContent=\"space-between\"\n      >\n        <Heading as=\"h2\">{t('subtitle')}</Heading>\n        <div className={styles.actionsContainer}>\n          <Select\n            id=\"date-range-select\"\n            value={numberOfMonths.toString()}\n            onChange={value => {\n              onDateRangeChange(Number(value))\n            }}\n            options={dateRangeOptions}\n            isRequired\n            label={t('startDate')}\n            shouldVisuallyHideLabel\n          />\n          <Button onClick={onCreatePayment} variant=\"secondary\" className={styles.nowrap}>\n            {t('createPaymentCta')}\n          </Button>\n        </div>\n      </Flex>\n\n      <DataView label={t('subtitle')} {...dataViewProps} />\n    </Flex>\n  )\n}\n"],"names":["PaymentsListPresentation","contractorPayments","numberOfMonths","onCreatePayment","onDateRangeChange","onViewPayment","alerts","Button","Text","Heading","Select","ButtonIcon","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","dateRangeOptions","dataViewProps","useDataView","checkDate","jsx","totals","uuid","EyeIcon","EmptyData","ActionsLayout","jsxs","Flex","alert","index","styles","value","DataView"],"mappings":"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"}