npm - @gusto/embedded-react-sdk - Versions diffs - 0.42.0 → 0.44.0 - Mend

@gusto/embedded-react-sdk 0.42.0 → 0.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (778) hide show

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

@@ -3,7 +3,9 @@ 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 { Flex as m } from "../../../Common/Flex/Flex.js";
+import "classnames";
+import "../../../../shared/constants.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";
@@ -12,28 +14,28 @@ 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 U } from "../../../Common/DataView/DataView.js";
-const re = ({
+const oe = ({
   payment: o,
-  contractor: m,
+  contractor: c,
   checkDate: w,
   paymentReceipt: 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 ? [
+  const { t: r } = k("Contractor.Payments.PaymentStatement"), i = j("currency"), { formatLongWithYear: u } = y(), f = v(c), p = o.wageType === "Hourly", d = Number(o.hours || 0), g = Number(o.hourlyRate || 0), D = Number(o.bonus || 0), N = Number(o.reimbursement || 0), 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: v(m)
+      value: v(c)
     },
     {
       label: r("receipt.debitDate"),
       value: t.debitDate ? u(String(t.debitDate)) : ""
     }
-  ] : [], [t, m, r, u]), P = C(() => {
+  ] : [], [t, c, r, u]), P = C(() => {
     const s = [
       {
         label: o.paymentMethod || "",
@@ -68,15 +70,15 @@ const re = ({
     i,
     o.wage
   ]);
-  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: [
+  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(b, { as: "h2", children: r("title", { contractorName: f }) }),
       /* @__PURE__ */ e(n, { children: u(w) })
     ] }) }),
-    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: [
+    I && /* @__PURE__ */ e("div", { className: l.receiptCard, children: /* @__PURE__ */ a(m, { flexDirection: "column", gap: 24, children: [
+      /* @__PURE__ */ a(m, { flexDirection: "column", alignItems: "center", gap: 16, children: [
         /* @__PURE__ */ e("div", { className: l.receiptIcon, "aria-hidden": !0, children: /* @__PURE__ */ e(O, { className: l.checkmarkIcon }) }),
-        /* @__PURE__ */ a(c, { flexDirection: "column", alignItems: "center", gap: 8, children: [
+        /* @__PURE__ */ a(m, { flexDirection: "column", alignItems: "center", gap: 8, children: [
           /* @__PURE__ */ e(n, { size: "sm", variant: "supporting", children: r("receipt.totalLabel") }),
           /* @__PURE__ */ e(b, { as: "h1", styledAs: "h2", className: l.totalAmount, children: i(Number(S)) })
         ] })
@@ -95,7 +97,7 @@ const re = ({
         }
       ),
       /* @__PURE__ */ e("hr", {}),
-      /* @__PURE__ */ a(c, { flexDirection: "column", alignItems: "center", gap: 12, children: [
+      /* @__PURE__ */ a(m, { flexDirection: "column", alignItems: "center", gap: 12, children: [
         /* @__PURE__ */ e(n, { size: "sm", variant: "supporting", className: l.disclaimer, children: /* @__PURE__ */ e(
           F,
           {
@@ -140,6 +142,6 @@ const re = ({
   ] });
 };
 export {
-  re as PaymentStatementPresentation
+  oe as PaymentStatementPresentation
 };
 //# sourceMappingURL=PaymentStatementPresentation.js.map

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

	@@ -1 +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 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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"}
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 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/PaymentSummary/PaymentSummaryPresentation.js CHANGED Viewed

@@ -3,13 +3,15 @@ import { useTranslation as T } from "react-i18next";
 import { useMemo as x } from "react";
 import { getContractorDisplayName as C } from "../CreatePayment/helpers.js";
 import { Flex as l } from "../../../Common/Flex/Flex.js";
+import "classnames";
+import "../../../../shared/constants.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 c } from "../../../Common/DataView/DataView.js";
-const k = "0.000", U = ({
+const k = "0.000", Y = ({
   contractorPaymentGroup: m,
   contractors: h,
   bankAccount: y,
@@ -131,6 +133,6 @@ const k = "0.000", U = ({
   ] });
 };
 export {
-  U as PaymentSummaryPresentation
+  Y as PaymentSummaryPresentation
 };
 //# sourceMappingURL=PaymentSummaryPresentation.js.map

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

	@@ -1 +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={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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"}
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={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":";;;;;;;;;;;;;AAgBA,MAAMA,IAAqB,SAadC,IAA6B,CAAC;AAAA,EACzC,wBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS,CAAA;AACX,MAAuC;AACrC,QAAM,EAAE,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,GAAS,OAAAC,EAAA,IAAUC,EAAA;AACzC,EAAAC,EAAQ,oCAAoC;AAC5C,QAAM,EAAE,EAAA,IAAMC,EAAe,oCAAoC,GAC3DC,IAAoBC,EAAA,GAEpBC,IAAiB,CAACC,MAClBA,EAAW,aAAa,YAAYA,EAAW,aAC1C,UAAUH,EAAkB,OAAOG,EAAW,UAAU,CAAC,CAAC,QAE5DA,EAAW,UAGdC,IAAqBnB,EAAuB,sBAAsB,CAAA,GAElEoB,IAASC,EAAQ,MACjBF,EAAmB,WAAW,IACzB,EAAE,YAAY,GAAG,aAAa,GAAG,qBAAqB,GAAG,aAAa,EAAA,IAExEA,EAAmB;AAAA,IACxB,CAACG,GAAKJ,OACJI,EAAI,cAAc,OAAOJ,EAAW,QAAQ,GAAG,GAC/CI,EAAI,eAAe,OAAOJ,EAAW,SAAS,GAAG,GACjDI,EAAI,uBAAuB,OAAOJ,EAAW,iBAAiB,GAAG,GACjEI,EAAI,eAAe,OAAOJ,EAAW,aAAa,GAAG,GAC9CI;AAAA,IAET,EAAE,YAAY,GAAG,aAAa,GAAG,qBAAqB,GAAG,aAAa,EAAA;AAAA,EAAE,GAEzE,CAACH,CAAkB,CAAC;AAEvB,SACE,gBAAAI,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAAjB,EAAO,SAAS,KACf,gBAAAkB,EAACD,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAAjB,EAAO,IAAI,CAACmB,GAAOC,MAClB,gBAAAF;AAAA,MAACd;AAAA,MAAA;AAAA,QAEC,OAAO,EAAE,UAAUe,EAAM,KAAK,IAAaA,EAAM,iBAAiB;AAAA,QAClE,QAAQA,EAAM;AAAA,QACd,WAAWA,EAAM;AAAA,QAEhB,UAAA,OAAOA,EAAM,WAAY,WACtB,EAAE,UAAUA,EAAM,OAAO,EAAW,IACnCA,EAAM,WAAW;AAAA,MAAA;AAAA,MAPjB,GAAGA,EAAM,IAAI,IAAIA,EAAM,KAAK,IAAIC,CAAK;AAAA,IAAA,CAS7C,GACH;AAAA,IAGF,gBAAAF,EAACd,GAAA,EAAM,QAAO,WAAU,OAAO,EAAE,cAAc,GAC7C,UAAA,gBAAAc,EAAChB,GAAA,EACE,UAAA,EAAE,kBAAkB;AAAA,MACnB,OAAOU,EAAmB;AAAA,IAAA,CAC3B,GACH,EAAA,CACF;AAAA,IAECf,KACC,gBAAAqB,EAACG,GAAA,EAAmB,WAAAzB,GAAsB,UAAUC,GAAmB,SAAAC,GAAkB;AAAA,IAG3F,gBAAAkB,EAACC,GAAA,EAAK,gBAAe,iBAAgB,YAAW,cAC9C,UAAA;AAAA,MAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,QAAA,gBAAAC,EAACf,GAAA,EAAQ,IAAG,MAAM,UAAA,EAAE,cAAc,GAAE;AAAA,QACpC,gBAAAe,EAAChB,GAAA,EAAK,SAAQ,cACX,UAAA,EAAE,mBAAmB,EAAE,WAAWT,EAAuB,UAAA,CAAW,EAAA,CACvE;AAAA,MAAA,GACF;AAAA,MACA,gBAAAyB,EAACjB,KAAO,SAASF,GAAQ,SAAQ,WAC9B,UAAA,EAAE,SAAS,EAAA,CACd;AAAA,IAAA,GACF;AAAA,IAGA,gBAAAmB;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP;AAAA,YACE,OAAO,EAAE,aAAa;AAAA,YACtB,QAAQ,MAAMd,EAAkB,OAAOf,EAAuB,QAAQ,UAAU,GAAG,CAAC;AAAA,UAAA;AAAA,UAEtF;AAAA,YACE,OAAO,EAAE,aAAa;AAAA,YACtB,QAAQ,MACNe,EAAkB,OAAOf,EAAuB,QAAQ,eAAe,GAAG,CAAC;AAAA,UAAA;AAAA,UAE/E;AAAA,YACE,OAAO,EAAE,cAAc;AAAA,YACvB,QAAQ,MAAME,GAAa,uBAAuB,EAAE,cAAc;AAAA,UAAA;AAAA,UAEpE;AAAA,YACE,OAAO,EAAE,WAAW;AAAA,YACpB,QAAQ,MAAMF,EAAuB,aAAa,EAAE,cAAc;AAAA,UAAA;AAAA,UAEpE;AAAA,YACE,OAAO,EAAE,mBAAmB;AAAA,YAC5B,QAAQ,MAAMA,EAAuB,aAAa,EAAE,cAAc;AAAA,UAAA;AAAA,QACpE;AAAA,QAEF,MAAM,CAACA,CAAsB;AAAA,QAC7B,OAAO,EAAE,qBAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,IAI/BmB,EAAmB,SAAS,KAC3B,gBAAAM;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP;AAAA,YACE,OAAO,EAAE,YAAY;AAAA,YACrB,QAAQ,CAAAC,MACNC;AAAA,cACE9B,EAAY;AAAA,gBACV,CAAAiB,MAAcA,EAAW,SAASY,EAAkB;AAAA,cAAA;AAAA,YACtD;AAAA,UACF;AAAA,UAEJ;AAAA,YACE,OAAO,EAAE,UAAU;AAAA,YACnB,QAAQ,CAAAA,MAAqBb,EAAea,CAAiB;AAAA,UAAA;AAAA,UAE/D;AAAA,YACE,OAAO,EAAE,eAAe;AAAA,YACxB,QAAQ,CAAAA,MACNA,EAAkB,kBAAkB,mBAChC,EAAE,8BAA8B,IAChCA,EAAkB,kBAAkB,UAClC,EAAE,sBAAsB,IACxBA,EAAkB,iBAAiB,EAAE,cAAc;AAAA,UAAA;AAAA,UAE7D;AAAA,YACE,OAAO,EAAE,OAAO;AAAA,YAChB,QAAQ,CAAAA,MACNA,EAAkB,aAAa,YAAYA,EAAkB,QACzDE,EAAmB,WAAWF,EAAkB,KAAK,CAAC,IACtDhC;AAAA,UAAA;AAAA,UAER;AAAA,YACE,OAAO,EAAE,MAAM;AAAA,YACf,QAAQ,CAAAgC,MAAqBf,EAAkB,OAAOe,EAAkB,QAAQ,GAAG,CAAC;AAAA,UAAA;AAAA,UAEtF;AAAA,YACE,OAAO,EAAE,OAAO;AAAA,YAChB,QAAQ,CAAAA,MACNf,EAAkB,OAAOe,EAAkB,SAAS,GAAG,CAAC;AAAA,UAAA;AAAA,UAE5D;AAAA,YACE,OAAO,EAAE,eAAe;AAAA,YACxB,QAAQ,CAAAA,MACNf,EAAkB,OAAOe,EAAkB,iBAAiB,GAAG,CAAC;AAAA,UAAA;AAAA,UAEpE;AAAA,YACE,OAAO,EAAE,OAAO;AAAA,YAChB,QAAQ,CAAAA,MACNf,EAAkB,OAAOe,EAAkB,aAAa,GAAG,CAAC;AAAA,UAAA;AAAA,QAChE;AAAA,QAEF,MAAMX;AAAA,QACN,QAAQ,OAAO;AAAA,UACb,YAAY,EAAE,aAAa;AAAA,UAC3B,YAAYJ,EAAkBK,EAAO,cAAc,CAAC;AAAA,UACpD,YAAYL,EAAkBK,EAAO,eAAe,CAAC;AAAA,UACrD,YAAYL,EAAkBK,EAAO,uBAAuB,CAAC;AAAA,UAC7D,YAAYL,EAAkBK,EAAO,eAAe,CAAC;AAAA,QAAA;AAAA,QAEvD,OAAO,EAAE,yBAAyB;AAAA,MAAA;AAAA,IAAA;AAAA,EACpC,GAEJ;AAEJ;"}

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

@@ -2,6 +2,8 @@ import { jsx as n, jsxs as i } from "react/jsx-runtime";
 import { useTranslation as A } from "react-i18next";
 import c from "./PaymentsListPresentation.module.scss.js";
 import { Flex as o } from "../../../Common/Flex/Flex.js";
+import "classnames";
+import "../../../../shared/constants.js";
 import { EmptyData as N } from "../../../Common/EmptyData/EmptyData.js";
 import { ActionsLayout as $ } from "../../../Common/ActionsLayout/ActionsLayout.js";
 import { useComponentContext as F } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
@@ -12,10 +14,10 @@ import { useDateFormatter as S } from "../../../../hooks/useDateFormatter.js";
 import { ConfirmWireDetails as V } from "../../../Payroll/ConfirmWireDetails/ConfirmWireDetails.js";
 import { useDataView as I } from "../../../Common/DataView/useDataView.js";
 import { DataView as M } from "../../../Common/DataView/DataView.js";
-const X = ({
+const _ = ({
   contractorPayments: u,
   numberOfMonths: d,
-  onCreatePayment: r,
+  onCreatePayment: a,
   onDateRangeChange: p,
   onViewPayment: y,
   alerts: s = [],
@@ -24,7 +26,7 @@ const X = ({
   onEvent: b,
   paginationProps: g
 }) => {
-  const { Button: a, Heading: l, Select: C, ButtonIcon: D, Alert: P } = F();
+  const { Button: r, Heading: l, Select: C, ButtonIcon: D, Alert: P } = F();
   j("Contractor.Payments.PaymentsList");
   const { t: e } = A("Contractor.Payments.PaymentsList"), m = k("currency"), { formatLongWithYear: v } = S(), x = [
     { value: "3", label: e("dateRanges.last3Months") },
@@ -56,7 +58,7 @@ const X = ({
         children: /* @__PURE__ */ n(R, { "aria-hidden": !0 })
       }
     ),
-    emptyState: () => /* @__PURE__ */ n(N, { title: e("noPaymentsFound"), description: e("noPaymentsDescription"), children: /* @__PURE__ */ n($, { justifyContent: "center", children: /* @__PURE__ */ n(a, { variant: "primary", onClick: r, children: e("createPaymentCta") }) }) }),
+    emptyState: () => /* @__PURE__ */ n(N, { title: e("noPaymentsFound"), description: e("noPaymentsDescription"), children: /* @__PURE__ */ n($, { justifyContent: "center", children: /* @__PURE__ */ n(r, { variant: "primary", onClick: a, children: e("createPaymentCta") }) }) }),
     pagination: g
   });
   return /* @__PURE__ */ i(o, { flexDirection: "column", gap: 24, children: [
@@ -70,7 +72,7 @@ const X = ({
         onDismiss: t.onDismiss,
         children: /* @__PURE__ */ i(o, { flexDirection: "column", gap: 12, children: [
           typeof t.content == "string" ? e(`alerts.${t.content}`) : t.content ?? null,
-          t.onAction && t.actionLabel && /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(a, { variant: "secondary", onClick: t.onAction, children: e(`alerts.${t.actionLabel}`) }) })
+          t.onAction && t.actionLabel && /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(r, { variant: "secondary", onClick: t.onAction, children: e(`alerts.${t.actionLabel}`) }) })
         ] })
       },
       `${t.type}-${t.title}-${w}`
@@ -105,7 +107,7 @@ const X = ({
                 shouldVisuallyHideLabel: !0
               }
             ),
-            /* @__PURE__ */ n(a, { onClick: r, variant: "secondary", className: c.nowrap, children: e("createPaymentCta") })
+            /* @__PURE__ */ n(r, { onClick: a, variant: "secondary", className: c.nowrap, children: e("createPaymentCta") })
           ] })
         ]
       }
@@ -114,6 +116,6 @@ const X = ({
   ] });
 };
 export {
-  X as PaymentsListPresentation
+  _ as PaymentsListPresentation
 };
 //# sourceMappingURL=PaymentsListPresentation.js.map

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

	@@ -1 +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'\nimport { ConfirmWireDetails } from '@/components/Payroll/ConfirmWireDetails'\nimport type { EventType } from '@/shared/constants'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\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 companyId: string\n hasUnresolvedWireInRequests: boolean\n onEvent: (type: EventType, data?: unknown) => void\n paginationProps?: PaginationControlProps\n}\n\nexport const PaymentsListPresentation = ({\n contractorPayments,\n numberOfMonths,\n onCreatePayment,\n onDateRangeChange,\n onViewPayment,\n alerts = [],\n companyId,\n hasUnresolvedWireInRequests,\n onEvent,\n paginationProps,\n}: ContractorPaymentPaymentsListPresentationProps) => {\n const { Button, 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 ]\n const { ...dataViewProps } = useDataView({\n data: contractorPayments,\n columns: [\n {\n title: t('paymentDateColumnLabel'),\n render: ({ checkDate }) => formatLongWithYear(checkDate) \|\| 'N/A',\n },\n {\n title: t('wageTotalColumnLabel'),\n render: ({ totals }) => currencyFormatter(Number(totals?.wageAmount \|\| 0)),\n },\n {\n title: t('reimbursementTotalColumnLabel'),\n render: ({ totals }) => currencyFormatter(Number(totals?.reimbursementAmount) \|\| 0),\n },\n ],\n itemMenu: ({ uuid }) => (\n <ButtonIcon\n aria-label={t('viewPaymentCta')}\n variant=\"tertiary\"\n onClick={() => {\n onViewPayment(uuid \|\| '')\n }}\n >\n <EyeIcon aria-hidden />\n </ButtonIcon>\n ),\n emptyState: () => (\n <EmptyData title={t('noPaymentsFound')} description={t('noPaymentsDescription')}>\n <ActionsLayout justifyContent=\"center\">\n <Button variant=\"primary\" onClick={onCreatePayment}>\n {t('createPaymentCta')}\n </Button>\n </ActionsLayout>\n </EmptyData>\n ),\n pagination: paginationProps,\n })\n\n return (\n <Flex flexDirection=\"column\" gap={24}>\n <Flex flexDirection=\"column\" gap={16}>\n <Heading as=\"h1\">{t('title')}</Heading>\n </Flex>\n\n {hasUnresolvedWireInRequests && (\n <ConfirmWireDetails companyId={companyId} onEvent={onEvent} />\n )}\n\n {alerts.length > 0 && (\n <Flex flexDirection=\"column\" gap={16}>\n {alerts.map((alert, index) => (\n <Alert\n key={`${alert.type}-${alert.title}-${index}`}\n label={t(`alerts.${alert.title}` as never, alert.translationParams)}\n status={alert.type}\n onDismiss={alert.onDismiss}\n >\n <Flex flexDirection=\"column\" gap={12}>\n {typeof alert.content === 'string'\n ? t(`alerts.${alert.content}` as never)\n : (alert.content ?? null)}\n {alert.onAction && alert.actionLabel && (\n <div>\n <Button variant=\"secondary\" onClick={alert.onAction}>\n {t(`alerts.${alert.actionLabel}` as never)}\n </Button>\n </div>\n )}\n </Flex>\n </Alert>\n ))}\n </Flex>\n )}\n\n <Flex\n flexDirection={{\n base: 'column',\n small: 'row',\n }}\n gap={16}\n alignItems={{\n base: 'stretch',\n small: '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","companyId","hasUnresolvedWireInRequests","onEvent","paginationProps","Button","Heading","Select","ButtonIcon","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","dateRangeOptions","dataViewProps","useDataView","checkDate","totals","uuid","jsx","EyeIcon","EmptyData","ActionsLayout","jsxs","Flex","ConfirmWireDetails","alert","index","styles","value","DataView"],"mappings":"~~;;;;;;;;;;;;;;~~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"}
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'\nimport { ConfirmWireDetails } from '@/components/Payroll/ConfirmWireDetails'\nimport type { EventType } from '@/shared/constants'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\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 companyId: string\n hasUnresolvedWireInRequests: boolean\n onEvent: (type: EventType, data?: unknown) => void\n paginationProps?: PaginationControlProps\n}\n\nexport const PaymentsListPresentation = ({\n contractorPayments,\n numberOfMonths,\n onCreatePayment,\n onDateRangeChange,\n onViewPayment,\n alerts = [],\n companyId,\n hasUnresolvedWireInRequests,\n onEvent,\n paginationProps,\n}: ContractorPaymentPaymentsListPresentationProps) => {\n const { Button, 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 ]\n const { ...dataViewProps } = useDataView({\n data: contractorPayments,\n columns: [\n {\n title: t('paymentDateColumnLabel'),\n render: ({ checkDate }) => formatLongWithYear(checkDate) \|\| 'N/A',\n },\n {\n title: t('wageTotalColumnLabel'),\n render: ({ totals }) => currencyFormatter(Number(totals?.wageAmount \|\| 0)),\n },\n {\n title: t('reimbursementTotalColumnLabel'),\n render: ({ totals }) => currencyFormatter(Number(totals?.reimbursementAmount) \|\| 0),\n },\n ],\n itemMenu: ({ uuid }) => (\n <ButtonIcon\n aria-label={t('viewPaymentCta')}\n variant=\"tertiary\"\n onClick={() => {\n onViewPayment(uuid \|\| '')\n }}\n >\n <EyeIcon aria-hidden />\n </ButtonIcon>\n ),\n emptyState: () => (\n <EmptyData title={t('noPaymentsFound')} description={t('noPaymentsDescription')}>\n <ActionsLayout justifyContent=\"center\">\n <Button variant=\"primary\" onClick={onCreatePayment}>\n {t('createPaymentCta')}\n </Button>\n </ActionsLayout>\n </EmptyData>\n ),\n pagination: paginationProps,\n })\n\n return (\n <Flex flexDirection=\"column\" gap={24}>\n <Flex flexDirection=\"column\" gap={16}>\n <Heading as=\"h1\">{t('title')}</Heading>\n </Flex>\n\n {hasUnresolvedWireInRequests && (\n <ConfirmWireDetails companyId={companyId} onEvent={onEvent} />\n )}\n\n {alerts.length > 0 && (\n <Flex flexDirection=\"column\" gap={16}>\n {alerts.map((alert, index) => (\n <Alert\n key={`${alert.type}-${alert.title}-${index}`}\n label={t(`alerts.${alert.title}` as never, alert.translationParams)}\n status={alert.type}\n onDismiss={alert.onDismiss}\n >\n <Flex flexDirection=\"column\" gap={12}>\n {typeof alert.content === 'string'\n ? t(`alerts.${alert.content}` as never)\n : (alert.content ?? null)}\n {alert.onAction && alert.actionLabel && (\n <div>\n <Button variant=\"secondary\" onClick={alert.onAction}>\n {t(`alerts.${alert.actionLabel}` as never)}\n </Button>\n </div>\n )}\n </Flex>\n </Alert>\n ))}\n </Flex>\n )}\n\n <Flex\n flexDirection={{\n base: 'column',\n small: 'row',\n }}\n gap={16}\n alignItems={{\n base: 'stretch',\n small: '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","companyId","hasUnresolvedWireInRequests","onEvent","paginationProps","Button","Heading","Select","ButtonIcon","Alert","useComponentContext","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","dateRangeOptions","dataViewProps","useDataView","checkDate","totals","uuid","jsx","EyeIcon","EmptyData","ActionsLayout","jsxs","Flex","ConfirmWireDetails","alert","index","styles","value","DataView"],"mappings":"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"}

package/dist/components/Contractor/Profile/ContractorProfileForm.js CHANGED Viewed

@@ -1,53 +1,52 @@
 import { jsx as i, jsxs as r, Fragment as m } from "react/jsx-runtime";
 import { FormProvider as S } from "react-hook-form";
-import { useTranslation as T } from "react-i18next";
-import C from "./ContractorProfileForm.module.scss.js";
-import { useComponentContext as D } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as I } from "../../../i18n/I18n.js";
-import { Form as O } from "../../Common/Form/Form.js";
-import { Grid as n } from "../../Common/Grid/Grid.js";
-import { usePlaceholderSSN as x, normalizeSSN as w } from "../../../helpers/ssn.js";
-import { usePlaceholderEin as E, normalizeEin as j } from "../../../helpers/federalEin.js";
-import { ContractorOnboardingStatus as v } from "../../../shared/constants.js";
+import { useTranslation as I } from "react-i18next";
+import { useComponentContext as T } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as x } from "../../../i18n/I18n.js";
+import { Form as C } from "../../Common/Form/Form.js";
+import { Grid as d } from "../../Common/Grid/Grid.js";
+import { usePlaceholderSSN as O, normalizeSSN as E } from "../../../helpers/ssn.js";
+import { usePlaceholderEin as j, normalizeEin as v } from "../../../helpers/federalEin.js";
+import { ContractorOnboardingStatus as w } from "../../../shared/constants.js";
+import { Flex as n } from "../../Common/Flex/Flex.js";
 import { TextInputField as l } from "../../Common/Fields/TextInputField/TextInputField.js";
-import { RadioGroupField as d } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
-import { NumberInputField as G } from "../../Common/Fields/NumberInputField/NumberInputField.js";
-import { Flex as z } from "../../Common/Flex/Flex.js";
-import { SwitchField as A } from "../../Common/Fields/SwitchField/SwitchField.js";
-import { DatePickerField as B } from "../../Common/Fields/DatePickerField/DatePickerField.js";
-function re({
-  formMethods: u,
-  handleSubmit: f,
+import { RadioGroupField as u } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import { NumberInputField as B } from "../../Common/Fields/NumberInputField/NumberInputField.js";
+import { SwitchField as G } from "../../Common/Fields/SwitchField/SwitchField.js";
+import { DatePickerField as z } from "../../Common/Fields/DatePickerField/DatePickerField.js";
+function ee({
+  formMethods: f,
+  handleSubmit: c,
   formState: o,
   shouldShowEmailField: p,
   shouldShowBusinessFields: b,
-  shouldShowIndividualFields: c,
-  shouldShowHourlyRate: h,
-  shouldShowSsnField: g,
+  shouldShowIndividualFields: h,
+  shouldShowHourlyRate: g,
+  shouldShowSsnField: R,
   shouldShowEinField: N,
-  contractorTypeOptions: R,
-  wageTypeOptions: y,
+  contractorTypeOptions: y,
+  wageTypeOptions: q,
   isEditing: s,
-  className: F,
+  className: D,
   existingContractor: t
 }) {
-  const a = D();
-  I("Contractor.Profile");
-  const { t: e } = T("Contractor.Profile"), q = x(t?.hasSsn ?? !1), P = E(t?.hasEin ?? !1);
-  return /* @__PURE__ */ i("section", { className: F, children: /* @__PURE__ */ i(S, { ...u, children: /* @__PURE__ */ r(O, { onSubmit: f, children: [
-    /* @__PURE__ */ r(n, { gridTemplateColumns: "1fr", gap: 24, className: "mb-8", children: [
-      /* @__PURE__ */ r("header", { children: [
+  const a = T();
+  x("Contractor.Profile");
+  const { t: e } = I("Contractor.Profile"), F = O(t?.hasSsn ?? !1), P = j(t?.hasEin ?? !1);
+  return /* @__PURE__ */ i("section", { className: D, children: /* @__PURE__ */ i(S, { ...f, children: /* @__PURE__ */ r(C, { onSubmit: c, children: [
+    /* @__PURE__ */ r(n, { flexDirection: "column", gap: 20, alignItems: "stretch", children: [
+      /* @__PURE__ */ i("header", { children: /* @__PURE__ */ r(n, { flexDirection: "column", gap: 4, children: [
         /* @__PURE__ */ i(a.Heading, { as: "h2", children: e("title") }),
-        /* @__PURE__ */ i(a.Text, { children: e("subtitle") })
-      ] }),
-      /* @__PURE__ */ i("div", { className: C.switchFieldContainer, children: /* @__PURE__ */ r(n, { gap: 16, children: [
+        /* @__PURE__ */ i(a.Text, { variant: "supporting", children: e("subtitle") })
+      ] }) }),
+      /* @__PURE__ */ i(a.Box, { children: /* @__PURE__ */ r(d, { gap: 16, children: [
         /* @__PURE__ */ i(
-          A,
+          G,
           {
             name: "selfOnboarding",
             label: e("fields.selfOnboarding.label"),
             description: e("fields.selfOnboarding.description"),
-            isDisabled: t && t.onboardingStatus !== v.ADMIN_ONBOARDING_INCOMPLETE
+            isDisabled: t && t.onboardingStatus !== w.ADMIN_ONBOARDING_INCOMPLETE
           }
         ),
         p && /* @__PURE__ */ i(
@@ -61,27 +60,27 @@ function re({
         )
       ] }) }),
       /* @__PURE__ */ i(
-        d,
+        u,
         {
           name: "contractorType",
           isRequired: !0,
           label: e("fields.contractorType.label"),
-          options: R
+          options: y
         }
       ),
-      c && /* @__PURE__ */ r(m, { children: [
-        /* @__PURE__ */ r(n, { gridTemplateColumns: { base: "1fr", medium: "1fr 1fr" }, gap: 16, children: [
+      h && /* @__PURE__ */ r(m, { children: [
+        /* @__PURE__ */ r(d, { gridTemplateColumns: { base: "1fr", medium: "1fr 1fr" }, gap: 16, children: [
           /* @__PURE__ */ i(l, { name: "firstName", label: e("fields.firstName.label"), isRequired: !0 }),
           /* @__PURE__ */ i(l, { name: "middleInitial", label: e("fields.middleInitial.label") })
         ] }),
         /* @__PURE__ */ i(l, { name: "lastName", label: e("fields.lastName.label"), isRequired: !0 }),
-        g && /* @__PURE__ */ i(
+        R && /* @__PURE__ */ i(
           l,
           {
             name: "ssn",
             label: e("fields.ssn.label"),
-            placeholder: q,
-            transform: w,
+            placeholder: F,
+            transform: E,
             isRequired: !0
           }
         )
@@ -101,22 +100,22 @@ function re({
             name: "ein",
             label: e("fields.ein.label"),
             placeholder: P,
-            transform: j,
+            transform: v,
             isRequired: !0
           }
         )
       ] }),
       /* @__PURE__ */ i(
-        d,
+        u,
         {
           name: "wageType",
           isRequired: !0,
           label: e("fields.wageType.label"),
-          options: y
+          options: q
         }
       ),
-      h && /* @__PURE__ */ i(
-        G,
+      g && /* @__PURE__ */ i(
+        B,
         {
           name: "hourlyRate",
           label: e("fields.hourlyRate.label"),
@@ -126,7 +125,7 @@ function re({
         }
       ),
       /* @__PURE__ */ i(
-        B,
+        z,
         {
           name: "startDate",
           label: e("fields.startDate.label"),
@@ -135,10 +134,10 @@ function re({
         }
       )
     ] }),
-    /* @__PURE__ */ i(z, { gap: 12, justifyContent: "flex-end", children: /* @__PURE__ */ i(a.Button, { type: "submit", variant: "primary", isDisabled: o.isSubmitting, children: o.isSubmitting ? e(s ? "buttons.updating" : "buttons.creating") : e(s ? "buttons.update" : "buttons.create") }) })
+    /* @__PURE__ */ i(n, { gap: 12, justifyContent: "flex-end", children: /* @__PURE__ */ i(a.Button, { type: "submit", variant: "primary", isDisabled: o.isSubmitting, children: o.isSubmitting ? e(s ? "buttons.updating" : "buttons.creating") : e(s ? "buttons.update" : "buttons.create") }) })
   ] }) }) });
 }
 export {
-  re as ContractorProfileForm
+  ee as ContractorProfileForm
 };
 //# sourceMappingURL=ContractorProfileForm.js.map

package/dist/components/Contractor/Profile/ContractorProfileForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContractorProfileForm.js","sources":["../../../../src/components/Contractor/Profile/ContractorProfileForm.tsx"],"sourcesContent":["import { FormProvider } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { type Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport type { useContractorProfile } from './useContractorProfile'\nimport styles from './ContractorProfileForm.module.scss'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { Form } from '@/components/Common/Form'\nimport { Grid } from '@/components/Common/Grid/Grid'\nimport { Flex } from '@/components/Common/Flex'\nimport { TextInputField } from '@/components/Common/Fields/TextInputField'\nimport { NumberInputField } from '@/components/Common/Fields/NumberInputField'\nimport { RadioGroupField } from '@/components/Common/Fields/RadioGroupField'\nimport { SwitchField } from '@/components/Common/Fields/SwitchField'\nimport { DatePickerField } from '@/components/Common/Fields/DatePickerField'\nimport { normalizeSSN, usePlaceholderSSN } from '@/helpers/ssn'\nimport { normalizeEin, usePlaceholderEin } from '@/helpers/federalEin'\nimport { ContractorOnboardingStatus } from '@/shared/constants'\n\n// Pure presentation component - takes all data as props\nexport type ContractorProfileFormProps = ReturnType<typeof useContractorProfile> & {\n className?: string\n existingContractor?: Contractor\n}\n\nexport function ContractorProfileForm({\n formMethods,\n handleSubmit,\n formState,\n shouldShowEmailField,\n shouldShowBusinessFields,\n shouldShowIndividualFields,\n shouldShowHourlyRate,\n shouldShowSsnField,\n shouldShowEinField,\n contractorTypeOptions,\n wageTypeOptions,\n isEditing,\n className,\n existingContractor,\n}: ContractorProfileFormProps) {\n const Components = useComponentContext()\n useI18n('Contractor.Profile')\n const { t } = useTranslation('Contractor.Profile')\n const ssnPlaceholder = usePlaceholderSSN(existingContractor?.hasSsn ?? false)\n const einPlaceholder = usePlaceholderEin(existingContractor?.hasEin ?? false)\n\n return (\n <section className={className}>\n <FormProvider {...formMethods}>\n <Form onSubmit={handleSubmit}>\n <Grid gridTemplateColumns=\"1fr\" gap={24} className=\"mb-8\">\n <header>\n <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n <Components.Text>{t('subtitle')}</Components.Text>\n </header>\n\n {/* Invite Contractor Card /}\n <div className={styles.switchFieldContainer}>\n <Grid gap={16}>\n {/ Invite Contractor Toggle /}\n <SwitchField\n name=\"selfOnboarding\"\n label={t('fields.selfOnboarding.label')}\n description={t('fields.selfOnboarding.description')}\n isDisabled={\n existingContractor &&\n existingContractor.onboardingStatus !==\n ContractorOnboardingStatus.ADMIN_ONBOARDING_INCOMPLETE\n }\n />\n\n {/ Email Field - shown when inviting contractor /}\n {shouldShowEmailField && (\n <TextInputField\n name=\"email\"\n label={t('fields.email.label')}\n isRequired\n type=\"email\"\n />\n )}\n </Grid>\n </div>\n\n {/ Contractor Type /}\n <RadioGroupField\n name=\"contractorType\"\n isRequired\n label={t('fields.contractorType.label')}\n options={contractorTypeOptions}\n />\n\n {/ Individual Contractor Fields /}\n {shouldShowIndividualFields && (\n <>\n <Grid gridTemplateColumns={{ base: '1fr', medium: '1fr 1fr' }} gap={16}>\n <TextInputField name=\"firstName\" label={t('fields.firstName.label')} isRequired />\n <TextInputField name=\"middleInitial\" label={t('fields.middleInitial.label')} />\n </Grid>\n <TextInputField name=\"lastName\" label={t('fields.lastName.label')} isRequired />\n {shouldShowSsnField && (\n <TextInputField\n name=\"ssn\"\n label={t('fields.ssn.label')}\n placeholder={ssnPlaceholder}\n transform={normalizeSSN}\n isRequired\n />\n )}\n </>\n )}\n\n {/ Business Contractor Fields /}\n {shouldShowBusinessFields && (\n <>\n <TextInputField\n name=\"businessName\"\n label={t('fields.businessName.label')}\n isRequired\n />\n {shouldShowEinField && (\n <TextInputField\n name=\"ein\"\n label={t('fields.ein.label')}\n placeholder={einPlaceholder}\n transform={normalizeEin}\n isRequired\n />\n )}\n </>\n )}\n\n {/ Wage Type /}\n <RadioGroupField\n name=\"wageType\"\n isRequired\n label={t('fields.wageType.label')}\n options={wageTypeOptions}\n />\n\n {/ Hourly Rate - shown for hourly contractors /}\n {shouldShowHourlyRate && (\n <NumberInputField\n name=\"hourlyRate\"\n label={t('fields.hourlyRate.label')}\n min={0}\n isRequired\n format=\"currency\"\n />\n )}\n\n {/ Start Date /}\n <DatePickerField\n name=\"startDate\"\n label={t('fields.startDate.label')}\n description={t('fields.startDate.description')}\n isRequired\n />\n </Grid>\n\n {/ Actions */}\n <Flex gap={12} justifyContent=\"flex-end\">\n <Components.Button type=\"submit\" variant=\"primary\" isDisabled={formState.isSubmitting}>\n {formState.isSubmitting\n ? isEditing\n ? t('buttons.updating')\n : t('buttons.creating')\n : isEditing\n ? t('buttons.update')\n : t('buttons.create')}\n </Components.Button>\n </Flex>\n </Form>\n </FormProvider>\n </section>\n )\n}\n"],"names":["ContractorProfileForm","formMethods","handleSubmit","formState","shouldShowEmailField","shouldShowBusinessFields","shouldShowIndividualFields","shouldShowHourlyRate","shouldShowSsnField","shouldShowEinField","contractorTypeOptions","wageTypeOptions","isEditing","className","existingContractor","Components","useComponentContext","useI18n","t","useTranslation","ssnPlaceholder","usePlaceholderSSN","einPlaceholder","usePlaceholderEin","jsx","FormProvider","jsxs","Form","Grid","styles","SwitchField","ContractorOnboardingStatus","TextInputField","RadioGroupField","Fragment","normalizeSSN","normalizeEin","NumberInputField","DatePickerField","Flex"],"mappings":"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"}
1	+ {"version":3,"file":"ContractorProfileForm.js","sources":["../../../../src/components/Contractor/Profile/ContractorProfileForm.tsx"],"sourcesContent":["import { FormProvider } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { type Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport type { useContractorProfile } from './useContractorProfile'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { Form } from '@/components/Common/Form'\nimport { Grid } from '@/components/Common/Grid/Grid'\nimport { Flex } from '@/components/Common/Flex'\nimport { TextInputField } from '@/components/Common/Fields/TextInputField'\nimport { NumberInputField } from '@/components/Common/Fields/NumberInputField'\nimport { RadioGroupField } from '@/components/Common/Fields/RadioGroupField'\nimport { SwitchField } from '@/components/Common/Fields/SwitchField'\nimport { DatePickerField } from '@/components/Common/Fields/DatePickerField'\nimport { normalizeSSN, usePlaceholderSSN } from '@/helpers/ssn'\nimport { normalizeEin, usePlaceholderEin } from '@/helpers/federalEin'\nimport { ContractorOnboardingStatus } from '@/shared/constants'\n\n// Pure presentation component - takes all data as props\nexport type ContractorProfileFormProps = ReturnType<typeof useContractorProfile> & {\n className?: string\n existingContractor?: Contractor\n}\n\nexport function ContractorProfileForm({\n formMethods,\n handleSubmit,\n formState,\n shouldShowEmailField,\n shouldShowBusinessFields,\n shouldShowIndividualFields,\n shouldShowHourlyRate,\n shouldShowSsnField,\n shouldShowEinField,\n contractorTypeOptions,\n wageTypeOptions,\n isEditing,\n className,\n existingContractor,\n}: ContractorProfileFormProps) {\n const Components = useComponentContext()\n useI18n('Contractor.Profile')\n const { t } = useTranslation('Contractor.Profile')\n const ssnPlaceholder = usePlaceholderSSN(existingContractor?.hasSsn ?? false)\n const einPlaceholder = usePlaceholderEin(existingContractor?.hasEin ?? false)\n\n return (\n <section className={className}>\n <FormProvider {...formMethods}>\n <Form onSubmit={handleSubmit}>\n <Flex flexDirection=\"column\" gap={20} alignItems=\"stretch\">\n <header>\n <Flex flexDirection=\"column\" gap={4}>\n <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n <Components.Text variant=\"supporting\">{t('subtitle')}</Components.Text>\n </Flex>\n </header>\n\n {/* Invite Contractor Card /}\n <Components.Box>\n <Grid gap={16}>\n {/ Invite Contractor Toggle /}\n <SwitchField\n name=\"selfOnboarding\"\n label={t('fields.selfOnboarding.label')}\n description={t('fields.selfOnboarding.description')}\n isDisabled={\n existingContractor &&\n existingContractor.onboardingStatus !==\n ContractorOnboardingStatus.ADMIN_ONBOARDING_INCOMPLETE\n }\n />\n\n {/ Email Field - shown when inviting contractor /}\n {shouldShowEmailField && (\n <TextInputField\n name=\"email\"\n label={t('fields.email.label')}\n isRequired\n type=\"email\"\n />\n )}\n </Grid>\n </Components.Box>\n\n {/ Contractor Type /}\n <RadioGroupField\n name=\"contractorType\"\n isRequired\n label={t('fields.contractorType.label')}\n options={contractorTypeOptions}\n />\n\n {/ Individual Contractor Fields /}\n {shouldShowIndividualFields && (\n <>\n <Grid gridTemplateColumns={{ base: '1fr', medium: '1fr 1fr' }} gap={16}>\n <TextInputField name=\"firstName\" label={t('fields.firstName.label')} isRequired />\n <TextInputField name=\"middleInitial\" label={t('fields.middleInitial.label')} />\n </Grid>\n <TextInputField name=\"lastName\" label={t('fields.lastName.label')} isRequired />\n {shouldShowSsnField && (\n <TextInputField\n name=\"ssn\"\n label={t('fields.ssn.label')}\n placeholder={ssnPlaceholder}\n transform={normalizeSSN}\n isRequired\n />\n )}\n </>\n )}\n\n {/ Business Contractor Fields /}\n {shouldShowBusinessFields && (\n <>\n <TextInputField\n name=\"businessName\"\n label={t('fields.businessName.label')}\n isRequired\n />\n {shouldShowEinField && (\n <TextInputField\n name=\"ein\"\n label={t('fields.ein.label')}\n placeholder={einPlaceholder}\n transform={normalizeEin}\n isRequired\n />\n )}\n </>\n )}\n\n {/ Wage Type /}\n <RadioGroupField\n name=\"wageType\"\n isRequired\n label={t('fields.wageType.label')}\n options={wageTypeOptions}\n />\n\n {/ Hourly Rate - shown for hourly contractors /}\n {shouldShowHourlyRate && (\n <NumberInputField\n name=\"hourlyRate\"\n label={t('fields.hourlyRate.label')}\n min={0}\n isRequired\n format=\"currency\"\n />\n )}\n\n {/ Start Date /}\n <DatePickerField\n name=\"startDate\"\n label={t('fields.startDate.label')}\n description={t('fields.startDate.description')}\n isRequired\n />\n </Flex>\n\n {/ Actions */}\n <Flex gap={12} justifyContent=\"flex-end\">\n <Components.Button type=\"submit\" variant=\"primary\" isDisabled={formState.isSubmitting}>\n {formState.isSubmitting\n ? isEditing\n ? t('buttons.updating')\n : t('buttons.creating')\n : isEditing\n ? t('buttons.update')\n : t('buttons.create')}\n </Components.Button>\n </Flex>\n </Form>\n </FormProvider>\n </section>\n )\n}\n"],"names":["ContractorProfileForm","formMethods","handleSubmit","formState","shouldShowEmailField","shouldShowBusinessFields","shouldShowIndividualFields","shouldShowHourlyRate","shouldShowSsnField","shouldShowEinField","contractorTypeOptions","wageTypeOptions","isEditing","className","existingContractor","Components","useComponentContext","useI18n","t","useTranslation","ssnPlaceholder","usePlaceholderSSN","einPlaceholder","usePlaceholderEin","jsx","FormProvider","jsxs","Form","Flex","Grid","SwitchField","ContractorOnboardingStatus","TextInputField","RadioGroupField","Fragment","normalizeSSN","normalizeEin","NumberInputField","DatePickerField"],"mappings":"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"}