@gusto/embedded-react-sdk 0.56.4 → 0.56.5
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.
- package/CHANGELOG.md +13 -0
- package/dist/components/Common/DocumentEmbed/DocumentEmbed.js +18 -0
- package/dist/components/Common/DocumentEmbed/DocumentEmbed.js.map +1 -0
- package/dist/components/Common/DocumentViewer/DocumentViewer.js +35 -29
- package/dist/components/Common/DocumentViewer/DocumentViewer.js.map +1 -1
- package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js +6 -3
- package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js.map +1 -1
- package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js +6 -3
- package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js.map +1 -1
- package/dist/components/Company/AssignSignatory/useAssignSignatory.js +8 -5
- package/dist/components/Company/AssignSignatory/useAssignSignatory.js.map +1 -1
- package/dist/components/Company/BankAccount/BankAccountForm/context.js +6 -3
- package/dist/components/Company/BankAccount/BankAccountForm/context.js.map +1 -1
- package/dist/components/Company/DocumentSigner/DocumentList/useDocumentList.js +6 -3
- package/dist/components/Company/DocumentSigner/DocumentList/useDocumentList.js.map +1 -1
- package/dist/components/Company/FederalTaxes/useFederalTaxes.js +11 -8
- package/dist/components/Company/FederalTaxes/useFederalTaxes.js.map +1 -1
- package/dist/components/Company/Industry/Context.js +9 -6
- package/dist/components/Company/Industry/Context.js.map +1 -1
- package/dist/components/Company/Locations/LocationForm/useLocationForm.js +6 -3
- package/dist/components/Company/Locations/LocationForm/useLocationForm.js.map +1 -1
- package/dist/components/Company/Locations/LocationsList/useLocationsList.js +6 -3
- package/dist/components/Company/Locations/LocationsList/useLocationsList.js.map +1 -1
- package/dist/components/Company/OnboardingOverview/context.js +6 -3
- package/dist/components/Company/OnboardingOverview/context.js.map +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesForm/context.js +6 -3
- package/dist/components/Company/StateTaxes/StateTaxesForm/context.js.map +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesList/context.js +6 -3
- package/dist/components/Company/StateTaxes/StateTaxesList/context.js.map +1 -1
- package/dist/components/Company/StateTaxes/TaxRateManagement/context.js +6 -3
- package/dist/components/Company/StateTaxes/TaxRateManagement/context.js.map +1 -1
- package/dist/components/Contractor/ContractorList/management/ManagementContractorList.js +64 -61
- package/dist/components/Contractor/ContractorList/management/ManagementContractorList.js.map +1 -1
- package/dist/components/Contractor/ContractorList/management/ManagementContractorListView.js +133 -134
- package/dist/components/Contractor/ContractorList/management/ManagementContractorListView.js.map +1 -1
- package/dist/components/Contractor/ContractorListFlow/ContractorListFlow.js.map +1 -1
- package/dist/components/Contractor/ContractorListFlow/ContractorListFlowComponents.js +22 -9
- package/dist/components/Contractor/ContractorListFlow/ContractorListFlowComponents.js.map +1 -1
- package/dist/components/Contractor/ContractorListFlow/contractorListStateMachine.js +51 -20
- package/dist/components/Contractor/ContractorListFlow/contractorListStateMachine.js.map +1 -1
- package/dist/components/Contractor/Dismissal/Dismissal.js +77 -0
- package/dist/components/Contractor/Dismissal/Dismissal.js.map +1 -0
- package/dist/components/Contractor/Dismissal/DismissalPresentation.js +57 -0
- package/dist/components/Contractor/Dismissal/DismissalPresentation.js.map +1 -0
- package/dist/components/Contractor/Dismissal/useDismissal/useDismissal.js +44 -0
- package/dist/components/Contractor/Dismissal/useDismissal/useDismissal.js.map +1 -0
- package/dist/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.js +45 -41
- package/dist/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.js.map +1 -1
- package/dist/components/Contractor/exports/contractorManagement.js +56 -54
- package/dist/components/Contractor/exports/contractorManagement.js.map +1 -1
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js +6 -3
- package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js.map +1 -1
- package/dist/components/Payroll/GrossUpModal/GrossUpModal.js +3 -2
- package/dist/components/Payroll/GrossUpModal/GrossUpModal.js.map +1 -1
- package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js +201 -196
- package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js.map +1 -1
- package/dist/components/Payroll/PayrollEditEmployee/shared/usePayrollEditEmployeeForm/fields.js +55 -52
- package/dist/components/Payroll/PayrollEditEmployee/shared/usePayrollEditEmployeeForm/fields.js.map +1 -1
- package/dist/components/Payroll/PayrollEditEmployee/shared/usePayrollEditEmployeeForm/payrollEditEmployeeSchema.js +38 -29
- package/dist/components/Payroll/PayrollEditEmployee/shared/usePayrollEditEmployeeForm/payrollEditEmployeeSchema.js.map +1 -1
- package/dist/components/Payroll/PayrollExecutionFlow/payrollExecutionMachine.js +17 -14
- package/dist/components/Payroll/PayrollExecutionFlow/payrollExecutionMachine.js.map +1 -1
- package/dist/components/Payroll/UNSTABLE_PayrollEditEmployee/UNSTABLE_PayrollEditEmployee.js +72 -68
- package/dist/components/Payroll/UNSTABLE_PayrollEditEmployee/UNSTABLE_PayrollEditEmployee.js.map +1 -1
- package/dist/components/Payroll/usePreparedPayrollData.js +10 -7
- package/dist/components/Payroll/usePreparedPayrollData.js.map +1 -1
- package/dist/contexts/ComponentAdapter/useComponentContext.js.map +1 -1
- package/dist/i18n/I18n.js +1 -0
- package/dist/i18n/I18n.js.map +1 -1
- package/dist/i18n/en/Contractor.Dismissal.json.js +20 -0
- package/dist/i18n/en/Contractor.Dismissal.json.js.map +1 -0
- package/dist/i18n/en/Contractor.Payments.PaymentStatement.json.js +2 -2
- package/dist/i18n/en/Payroll.PayrollEditEmployee.json.js +38 -38
- package/dist/i18n/en/Payroll.UNSTABLE_PayrollEditEmployee.json.js +31 -31
- package/dist/i18n/en/common.json.js +37 -35
- package/dist/i18n/en/common.json.js.map +1 -1
- package/dist/package.json.js +1 -1
- package/dist/shared/constants.js +1 -0
- package/dist/shared/constants.js.map +1 -1
- package/dist/src/components/Common/DocumentEmbed/DocumentEmbed.d.ts +3 -0
- package/dist/src/components/Common/DocumentEmbed/DocumentEmbedTypes.d.ts +25 -0
- package/dist/src/components/Common/DocumentEmbed/index.d.ts +2 -0
- package/dist/src/components/Contractor/ContractorList/management/ManagementContractorList.d.ts +2 -0
- package/dist/src/components/Contractor/ContractorList/management/ManagementContractorListView.d.ts +3 -1
- package/dist/src/components/Contractor/ContractorListFlow/ContractorListFlow.d.ts +6 -4
- package/dist/src/components/Contractor/ContractorListFlow/ContractorListFlowComponents.d.ts +2 -0
- package/dist/src/components/Contractor/ContractorListFlow/contractorListStateMachine.d.ts +1 -0
- package/dist/src/components/Contractor/ContractorListFlow/contractorListStateMachine.test.d.ts +1 -0
- package/dist/src/components/Contractor/Dismissal/Dismissal.d.ts +45 -0
- package/dist/src/components/Contractor/Dismissal/DismissalPresentation.d.ts +17 -0
- package/dist/src/components/Contractor/Dismissal/useDismissal/useDismissal.d.ts +41 -0
- package/dist/src/components/Contractor/Dismissal/useDismissal/useDismissal.test.d.ts +1 -0
- package/dist/src/components/Contractor/exports/contractorManagement.d.ts +1 -0
- package/dist/src/components/Payroll/PayrollEditEmployee/shared/usePayrollEditEmployeeForm/payrollEditEmployeeSchema.d.ts +19 -0
- package/dist/src/contexts/ComponentAdapter/componentAdapterTypes.d.ts +1 -0
- package/dist/src/contexts/ComponentAdapter/useComponentContext.d.ts +5 -2
- package/dist/src/i18n/en/common.json.d.ts +3 -0
- package/dist/src/i18n/types.d.ts +47 -0
- package/dist/src/shared/constants.d.ts +2 -0
- package/docs/guides/endpoint-inventory.json +18 -0
- package/package.json +1 -1
package/dist/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.js
CHANGED
|
@@ -1,111 +1,115 @@
|
|
|
1
1
|
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { useTranslation as
|
|
3
|
-
import { useMemo as
|
|
4
|
-
import { getContractorDisplayName as
|
|
2
|
+
import { useTranslation as k, Trans as T } from "react-i18next";
|
|
3
|
+
import { useMemo as N } from "react";
|
|
4
|
+
import { getContractorDisplayName as F } from "../../shared/helpers.js";
|
|
5
5
|
import { getContractorPaymentTotalAmount as A } from "../shared/paymentAmounts.js";
|
|
6
6
|
import l from "./PaymentStatementPresentation.module.scss.js";
|
|
7
|
-
import { Flex as
|
|
7
|
+
import { Flex as c } from "../../../Common/Flex/Flex.js";
|
|
8
8
|
import { useComponentContext as H } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
9
9
|
import { useI18n as j } from "../../../../i18n/I18n.js";
|
|
10
|
-
import { formatHoursDisplay as
|
|
11
|
-
import
|
|
12
|
-
import { useDateFormatter as
|
|
13
|
-
import { addressInline as
|
|
14
|
-
import
|
|
10
|
+
import { formatHoursDisplay as M } from "../../../Payroll/helpers.js";
|
|
11
|
+
import y from "../../../../hooks/useNumberFormatter.js";
|
|
12
|
+
import { useDateFormatter as O } from "../../../../hooks/useDateFormatter.js";
|
|
13
|
+
import { addressInline as U, formatPhoneNumber as B } from "../../../../helpers/formattedStrings.js";
|
|
14
|
+
import K from "../../../../assets/icons/receipt-check.svg.js";
|
|
15
15
|
import { DataView as V } from "../../../Common/DataView/DataView.js";
|
|
16
16
|
const oe = ({
|
|
17
17
|
className: v,
|
|
18
18
|
payment: o,
|
|
19
|
-
contractor:
|
|
20
|
-
checkDate:
|
|
19
|
+
contractor: x,
|
|
20
|
+
checkDate: C,
|
|
21
21
|
paymentReceipt: t
|
|
22
22
|
}) => {
|
|
23
|
-
const
|
|
23
|
+
const d = H(), { Text: s, Heading: h, Link: I } = d;
|
|
24
24
|
j("Contractor.Payments.PaymentStatement");
|
|
25
|
-
const { t: r } =
|
|
25
|
+
const { t: r } = k("Contractor.Payments.PaymentStatement"), i = y("currency"), { formatLongWithYear: m } = O(), f = F(x), b = o.wageType === "Hourly", u = Number(o.hours || 0), p = Number(o.hourlyRate || 0), g = Number(o.bonus || 0), D = Number(o.reimbursement || 0), P = !!(t && o.status === "Funded" && o.paymentMethod === "Direct Deposit"), w = t?.totals?.companyDebit || "0", z = N(() => t ? [
|
|
26
|
+
{
|
|
27
|
+
label: r("receipt.receiptId"),
|
|
28
|
+
value: t.contractorPaymentUuid || ""
|
|
29
|
+
},
|
|
26
30
|
{
|
|
27
31
|
label: r("receipt.from"),
|
|
28
32
|
value: t.nameOfSender || ""
|
|
29
33
|
},
|
|
30
34
|
{
|
|
31
35
|
label: r("receipt.to"),
|
|
32
|
-
value:
|
|
36
|
+
value: t.nameOfRecipient || ""
|
|
33
37
|
},
|
|
34
38
|
{
|
|
35
39
|
label: r("receipt.debitDate"),
|
|
36
|
-
value: t.debitDate ?
|
|
40
|
+
value: t.debitDate ? m(String(t.debitDate)) : ""
|
|
37
41
|
}
|
|
38
|
-
] : [], [t,
|
|
42
|
+
] : [], [t, r, m]), S = N(() => {
|
|
39
43
|
const n = [
|
|
40
44
|
{
|
|
41
45
|
label: o.paymentMethod || "",
|
|
42
46
|
amount: i(A(o))
|
|
43
47
|
}
|
|
44
48
|
];
|
|
45
|
-
return
|
|
49
|
+
return b && u > 0 ? n.push({
|
|
46
50
|
label: r("hoursLabel"),
|
|
47
51
|
amount: r("hoursAmount", {
|
|
48
|
-
hours:
|
|
49
|
-
rate: i(
|
|
52
|
+
hours: M(u),
|
|
53
|
+
rate: i(p)
|
|
50
54
|
})
|
|
51
55
|
}) : n.push({
|
|
52
56
|
label: r("wageLabel"),
|
|
53
57
|
amount: i(Number(o.wage || 0))
|
|
54
58
|
}), n.push({
|
|
55
59
|
label: r("bonus"),
|
|
56
|
-
amount: i(
|
|
60
|
+
amount: i(g)
|
|
57
61
|
}), n.push({
|
|
58
62
|
label: r("reimbursement"),
|
|
59
|
-
amount: i(
|
|
63
|
+
amount: i(D)
|
|
60
64
|
}), n;
|
|
61
|
-
}, [o,
|
|
62
|
-
return /* @__PURE__ */ a(
|
|
63
|
-
/* @__PURE__ */ e(
|
|
64
|
-
/* @__PURE__ */ e(
|
|
65
|
-
/* @__PURE__ */ e(s, { variant: "supporting", children:
|
|
65
|
+
}, [o, b, u, p, g, D, r, i]);
|
|
66
|
+
return /* @__PURE__ */ a(c, { className: v, flexDirection: "column", gap: 32, children: [
|
|
67
|
+
/* @__PURE__ */ e(c, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ a(c, { flexDirection: "column", gap: 8, children: [
|
|
68
|
+
/* @__PURE__ */ e(h, { as: "h2", children: r("title", { contractorName: f }) }),
|
|
69
|
+
/* @__PURE__ */ e(s, { variant: "supporting", children: m(C) })
|
|
66
70
|
] }) }),
|
|
67
|
-
|
|
68
|
-
/* @__PURE__ */ a(
|
|
69
|
-
/* @__PURE__ */ e("div", { className: l.receiptIcon, "aria-hidden": !0, children: /* @__PURE__ */ e(
|
|
70
|
-
/* @__PURE__ */ a(
|
|
71
|
+
P && /* @__PURE__ */ e("div", { className: l.receiptCard, children: /* @__PURE__ */ a(c, { flexDirection: "column", gap: 24, children: [
|
|
72
|
+
/* @__PURE__ */ a(c, { flexDirection: "column", alignItems: "center", gap: 16, children: [
|
|
73
|
+
/* @__PURE__ */ e("div", { className: l.receiptIcon, "aria-hidden": !0, children: /* @__PURE__ */ e(K, { className: l.checkmarkIcon }) }),
|
|
74
|
+
/* @__PURE__ */ a(c, { flexDirection: "column", alignItems: "center", gap: 8, children: [
|
|
71
75
|
/* @__PURE__ */ e(s, { size: "sm", variant: "supporting", children: r("receipt.totalLabel") }),
|
|
72
|
-
/* @__PURE__ */ e(
|
|
76
|
+
/* @__PURE__ */ e(h, { as: "h1", styledAs: "h2", className: l.totalAmount, children: i(Number(w)) })
|
|
73
77
|
] })
|
|
74
78
|
] }),
|
|
75
79
|
/* @__PURE__ */ e(
|
|
76
|
-
|
|
80
|
+
d.DescriptionList,
|
|
77
81
|
{
|
|
78
82
|
layout: "horizontal",
|
|
79
83
|
showSeparators: !1,
|
|
80
|
-
items:
|
|
84
|
+
items: z.map(({ label: n, value: L }) => ({
|
|
81
85
|
term: /* @__PURE__ */ e(s, { size: "sm", variant: "supporting", children: n }),
|
|
82
|
-
description: /* @__PURE__ */ e(s, { size: "sm", children:
|
|
86
|
+
description: /* @__PURE__ */ e(s, { size: "sm", children: L })
|
|
83
87
|
}))
|
|
84
88
|
}
|
|
85
89
|
),
|
|
86
90
|
/* @__PURE__ */ e("hr", {}),
|
|
87
|
-
/* @__PURE__ */ a(
|
|
91
|
+
/* @__PURE__ */ a(c, { flexDirection: "column", alignItems: "center", gap: 12, children: [
|
|
88
92
|
/* @__PURE__ */ e(s, { size: "sm", variant: "supporting", className: l.disclaimer, children: /* @__PURE__ */ e(
|
|
89
|
-
|
|
93
|
+
T,
|
|
90
94
|
{
|
|
91
95
|
i18nKey: "receipt.disclaimer",
|
|
92
96
|
t: r,
|
|
93
97
|
components: {
|
|
94
|
-
licensesLink: /* @__PURE__ */ e(
|
|
98
|
+
licensesLink: /* @__PURE__ */ e(I, { href: t?.licenseUri || "", target: "_blank" })
|
|
95
99
|
}
|
|
96
100
|
}
|
|
97
101
|
) }),
|
|
98
102
|
/* @__PURE__ */ e("hr", {}),
|
|
99
103
|
/* @__PURE__ */ e(s, { size: "sm", variant: "supporting", className: l.companyInfo, children: t?.licensee?.name || "" }),
|
|
100
104
|
/* @__PURE__ */ a(s, { size: "sm", variant: "supporting", className: l.address, children: [
|
|
101
|
-
|
|
105
|
+
U({
|
|
102
106
|
street1: t?.licensee?.address || "",
|
|
103
107
|
city: t?.licensee?.city || "",
|
|
104
108
|
state: t?.licensee?.state || "",
|
|
105
109
|
zip: t?.licensee?.postalCode || ""
|
|
106
110
|
}),
|
|
107
111
|
" | ",
|
|
108
|
-
|
|
112
|
+
B(t?.licensee?.phoneNumber)
|
|
109
113
|
] })
|
|
110
114
|
] })
|
|
111
115
|
] }) }),
|
|
@@ -123,8 +127,8 @@ const oe = ({
|
|
|
123
127
|
render: ({ amount: n }) => n || ""
|
|
124
128
|
}
|
|
125
129
|
],
|
|
126
|
-
data:
|
|
127
|
-
label: r("title", { contractorName:
|
|
130
|
+
data: S,
|
|
131
|
+
label: r("title", { contractorName: f })
|
|
128
132
|
}
|
|
129
133
|
)
|
|
130
134
|
] });
|
package/dist/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.js.map
CHANGED
|
@@ -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 '../../shared/helpers'\nimport { getContractorPaymentTotalAmount } from '../shared/paymentAmounts'\nimport styles from './PaymentStatementPresentation.module.scss'\nimport { DataView, Flex } from '@/components/Common'\nimport type { DescriptionListItem } from '@/components/Common/UI/DescriptionList/DescriptionListTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { addressInline, formatPhoneNumber } from '@/helpers/formattedStrings'\nimport ReceiptCheck from '@/assets/icons/receipt-check.svg?react'\n\ninterface PaymentStatementPresentationProps {\n /** CSS class name applied to the root element. */\n className?: string\n payment: ContractorPaymentForGroup\n contractor: Contractor\n paymentReceipt?: ContractorPaymentReceipt\n checkDate: string\n}\n\ntype PaymentStatementRow = {\n label: string\n amount: string | null\n}\n\n/** @internal */\nexport const PaymentStatementPresentation = ({\n className,\n payment,\n contractor,\n checkDate,\n paymentReceipt,\n}: PaymentStatementPresentationProps) => {\n const Components = useComponentContext()\n const { Text, Heading, Link } = Components\n useI18n('Contractor.Payments.PaymentStatement')\n const { t } = useTranslation('Contractor.Payments.PaymentStatement')\n const currencyFormatter = useNumberFormatter('currency')\n const { formatLongWithYear } = useDateFormatter()\n\n const contractorName = getContractorDisplayName(contractor)\n const isHourly = payment.wageType === 'Hourly'\n const hours = Number(payment.hours || 0)\n const hourlyRate = Number(payment.hourlyRate || 0)\n const bonus = Number(payment.bonus || 0)\n const reimbursement = Number(payment.reimbursement || 0)\n\n const shouldShowReceipt = Boolean(\n paymentReceipt && payment.status === 'Funded' && payment.paymentMethod === 'Direct Deposit',\n )\n\n const receiptTotal = paymentReceipt?.totals?.companyDebit || '0'\n\n const receiptDetailsConfig = useMemo(() => {\n if (!paymentReceipt) return []\n\n return [\n {\n label: t('receipt.from'),\n value: paymentReceipt.nameOfSender || '',\n },\n {\n label: t('receipt.to'),\n value: getContractorDisplayName(contractor),\n },\n {\n label: t('receipt.debitDate'),\n value: paymentReceipt.debitDate ? formatLongWithYear(String(paymentReceipt.debitDate)) : '',\n },\n ]\n }, [paymentReceipt, contractor, t, formatLongWithYear])\n\n const statementRows = useMemo<PaymentStatementRow[]>(() => {\n const rows: PaymentStatementRow[] = [\n {\n label: payment.paymentMethod || '',\n amount: currencyFormatter(getContractorPaymentTotalAmount(payment)),\n },\n ]\n\n if (isHourly && hours > 0) {\n rows.push({\n label: t('hoursLabel'),\n amount: t('hoursAmount', {\n hours: formatHoursDisplay(hours),\n rate: currencyFormatter(hourlyRate),\n }),\n })\n } else {\n rows.push({\n label: t('wageLabel'),\n amount: currencyFormatter(Number(payment.wage || 0)),\n })\n }\n\n rows.push({\n label: t('bonus'),\n amount: currencyFormatter(bonus),\n })\n\n rows.push({\n label: t('reimbursement'),\n amount: currencyFormatter(reimbursement),\n })\n\n return rows\n }, [payment, isHourly, hours, hourlyRate, bonus, reimbursement, t, currencyFormatter])\n\n return (\n <Flex className={className} flexDirection=\"column\" gap={32}>\n <Flex flexDirection=\"column\" gap={16}>\n <Flex flexDirection=\"column\" gap={8}>\n <Heading as=\"h2\">{t('title', { contractorName })}</Heading>\n <Text variant=\"supporting\">{formatLongWithYear(checkDate)}</Text>\n </Flex>\n </Flex>\n\n {shouldShowReceipt && (\n <div className={styles.receiptCard}>\n <Flex flexDirection=\"column\" gap={24}>\n <Flex flexDirection=\"column\" alignItems=\"center\" gap={16}>\n <div className={styles.receiptIcon} aria-hidden>\n <ReceiptCheck className={styles.checkmarkIcon} />\n </div>\n\n <Flex flexDirection=\"column\" alignItems=\"center\" gap={8}>\n <Text size=\"sm\" variant=\"supporting\">\n {t('receipt.totalLabel')}\n </Text>\n <Heading as=\"h1\" styledAs=\"h2\" className={styles.totalAmount}>\n {currencyFormatter(Number(receiptTotal))}\n </Heading>\n </Flex>\n </Flex>\n\n <Components.DescriptionList\n layout=\"horizontal\"\n showSeparators={false}\n items={receiptDetailsConfig.map(({ label, value }): DescriptionListItem => ({\n term: (\n <Text size=\"sm\" variant=\"supporting\">\n {label}\n </Text>\n ),\n description: <Text size=\"sm\">{value}</Text>,\n }))}\n />\n <hr />\n <Flex flexDirection=\"column\" alignItems=\"center\" gap={12}>\n <Text size=\"sm\" variant=\"supporting\" className={styles.disclaimer}>\n <Trans\n i18nKey=\"receipt.disclaimer\"\n t={t}\n components={{\n licensesLink: <Link href={paymentReceipt?.licenseUri || ''} target=\"_blank\" />,\n }}\n />\n </Text>\n <hr />\n\n <Text size=\"sm\" variant=\"supporting\" className={styles.companyInfo}>\n {paymentReceipt?.licensee?.name || ''}\n </Text>\n <Text size=\"sm\" variant=\"supporting\" className={styles.address}>\n {addressInline({\n street1: paymentReceipt?.licensee?.address || '',\n city: paymentReceipt?.licensee?.city || '',\n state: paymentReceipt?.licensee?.state || '',\n zip: paymentReceipt?.licensee?.postalCode || '',\n country: '',\n uuid: '',\n })}\n {' | '}\n {formatPhoneNumber(paymentReceipt?.licensee?.phoneNumber)}\n </Text>\n </Flex>\n </Flex>\n </div>\n )}\n\n <DataView\n columns={[\n {\n title: t('debitedColumn'),\n render: ({ label }) => label,\n },\n {\n title: t('amountColumn'),\n justify: 'end',\n render: ({ amount }) => amount || '',\n },\n ]}\n data={statementRows}\n label={t('title', { contractorName })}\n />\n </Flex>\n )\n}\n"],"names":["PaymentStatementPresentation","className","payment","contractor","checkDate","paymentReceipt","Components","useComponentContext","Text","Heading","Link","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","contractorName","getContractorDisplayName","isHourly","hours","hourlyRate","bonus","reimbursement","shouldShowReceipt","receiptTotal","receiptDetailsConfig","useMemo","statementRows","rows","getContractorPaymentTotalAmount","formatHoursDisplay","Flex","jsx","styles","jsxs","ReceiptCheck","label","value","Trans","addressInline","formatPhoneNumber","DataView","amount"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PaymentStatementPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport type { ContractorPaymentForGroup } from '@gusto/embedded-api/models/components/contractorpaymentforgroup'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { useMemo } from 'react'\nimport type { ContractorPaymentReceipt } from '@gusto/embedded-api/models/components/contractorpaymentreceipt'\nimport { getContractorDisplayName } from '../../shared/helpers'\nimport { getContractorPaymentTotalAmount } from '../shared/paymentAmounts'\nimport styles from './PaymentStatementPresentation.module.scss'\nimport { DataView, Flex } from '@/components/Common'\nimport type { DescriptionListItem } from '@/components/Common/UI/DescriptionList/DescriptionListTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { addressInline, formatPhoneNumber } from '@/helpers/formattedStrings'\nimport ReceiptCheck from '@/assets/icons/receipt-check.svg?react'\n\ninterface PaymentStatementPresentationProps {\n /** CSS class name applied to the root element. */\n className?: string\n payment: ContractorPaymentForGroup\n contractor: Contractor\n paymentReceipt?: ContractorPaymentReceipt\n checkDate: string\n}\n\ntype PaymentStatementRow = {\n label: string\n amount: string | null\n}\n\n/** @internal */\nexport const PaymentStatementPresentation = ({\n className,\n payment,\n contractor,\n checkDate,\n paymentReceipt,\n}: PaymentStatementPresentationProps) => {\n const Components = useComponentContext()\n const { Text, Heading, Link } = Components\n useI18n('Contractor.Payments.PaymentStatement')\n const { t } = useTranslation('Contractor.Payments.PaymentStatement')\n const currencyFormatter = useNumberFormatter('currency')\n const { formatLongWithYear } = useDateFormatter()\n\n const contractorName = getContractorDisplayName(contractor)\n const isHourly = payment.wageType === 'Hourly'\n const hours = Number(payment.hours || 0)\n const hourlyRate = Number(payment.hourlyRate || 0)\n const bonus = Number(payment.bonus || 0)\n const reimbursement = Number(payment.reimbursement || 0)\n\n const shouldShowReceipt = Boolean(\n paymentReceipt && payment.status === 'Funded' && payment.paymentMethod === 'Direct Deposit',\n )\n\n const receiptTotal = paymentReceipt?.totals?.companyDebit || '0'\n\n const receiptDetailsConfig = useMemo(() => {\n if (!paymentReceipt) return []\n\n return [\n {\n label: t('receipt.receiptId'),\n value: paymentReceipt.contractorPaymentUuid || '',\n },\n {\n label: t('receipt.from'),\n value: paymentReceipt.nameOfSender || '',\n },\n {\n label: t('receipt.to'),\n value: paymentReceipt.nameOfRecipient || '',\n },\n {\n label: t('receipt.debitDate'),\n value: paymentReceipt.debitDate ? formatLongWithYear(String(paymentReceipt.debitDate)) : '',\n },\n ]\n }, [paymentReceipt, t, formatLongWithYear])\n\n const statementRows = useMemo<PaymentStatementRow[]>(() => {\n const rows: PaymentStatementRow[] = [\n {\n label: payment.paymentMethod || '',\n amount: currencyFormatter(getContractorPaymentTotalAmount(payment)),\n },\n ]\n\n if (isHourly && hours > 0) {\n rows.push({\n label: t('hoursLabel'),\n amount: t('hoursAmount', {\n hours: formatHoursDisplay(hours),\n rate: currencyFormatter(hourlyRate),\n }),\n })\n } else {\n rows.push({\n label: t('wageLabel'),\n amount: currencyFormatter(Number(payment.wage || 0)),\n })\n }\n\n rows.push({\n label: t('bonus'),\n amount: currencyFormatter(bonus),\n })\n\n rows.push({\n label: t('reimbursement'),\n amount: currencyFormatter(reimbursement),\n })\n\n return rows\n }, [payment, isHourly, hours, hourlyRate, bonus, reimbursement, t, currencyFormatter])\n\n return (\n <Flex className={className} flexDirection=\"column\" gap={32}>\n <Flex flexDirection=\"column\" gap={16}>\n <Flex flexDirection=\"column\" gap={8}>\n <Heading as=\"h2\">{t('title', { contractorName })}</Heading>\n <Text variant=\"supporting\">{formatLongWithYear(checkDate)}</Text>\n </Flex>\n </Flex>\n\n {shouldShowReceipt && (\n <div className={styles.receiptCard}>\n <Flex flexDirection=\"column\" gap={24}>\n <Flex flexDirection=\"column\" alignItems=\"center\" gap={16}>\n <div className={styles.receiptIcon} aria-hidden>\n <ReceiptCheck className={styles.checkmarkIcon} />\n </div>\n\n <Flex flexDirection=\"column\" alignItems=\"center\" gap={8}>\n <Text size=\"sm\" variant=\"supporting\">\n {t('receipt.totalLabel')}\n </Text>\n <Heading as=\"h1\" styledAs=\"h2\" className={styles.totalAmount}>\n {currencyFormatter(Number(receiptTotal))}\n </Heading>\n </Flex>\n </Flex>\n\n <Components.DescriptionList\n layout=\"horizontal\"\n showSeparators={false}\n items={receiptDetailsConfig.map(({ label, value }): DescriptionListItem => ({\n term: (\n <Text size=\"sm\" variant=\"supporting\">\n {label}\n </Text>\n ),\n description: <Text size=\"sm\">{value}</Text>,\n }))}\n />\n <hr />\n <Flex flexDirection=\"column\" alignItems=\"center\" gap={12}>\n <Text size=\"sm\" variant=\"supporting\" className={styles.disclaimer}>\n <Trans\n i18nKey=\"receipt.disclaimer\"\n t={t}\n components={{\n licensesLink: <Link href={paymentReceipt?.licenseUri || ''} target=\"_blank\" />,\n }}\n />\n </Text>\n <hr />\n\n <Text size=\"sm\" variant=\"supporting\" className={styles.companyInfo}>\n {paymentReceipt?.licensee?.name || ''}\n </Text>\n <Text size=\"sm\" variant=\"supporting\" className={styles.address}>\n {addressInline({\n street1: paymentReceipt?.licensee?.address || '',\n city: paymentReceipt?.licensee?.city || '',\n state: paymentReceipt?.licensee?.state || '',\n zip: paymentReceipt?.licensee?.postalCode || '',\n country: '',\n uuid: '',\n })}\n {' | '}\n {formatPhoneNumber(paymentReceipt?.licensee?.phoneNumber)}\n </Text>\n </Flex>\n </Flex>\n </div>\n )}\n\n <DataView\n columns={[\n {\n title: t('debitedColumn'),\n render: ({ label }) => label,\n },\n {\n title: t('amountColumn'),\n justify: 'end',\n render: ({ amount }) => amount || '',\n },\n ]}\n data={statementRows}\n label={t('title', { contractorName })}\n />\n </Flex>\n )\n}\n"],"names":["PaymentStatementPresentation","className","payment","contractor","checkDate","paymentReceipt","Components","useComponentContext","Text","Heading","Link","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","contractorName","getContractorDisplayName","isHourly","hours","hourlyRate","bonus","reimbursement","shouldShowReceipt","receiptTotal","receiptDetailsConfig","useMemo","statementRows","rows","getContractorPaymentTotalAmount","formatHoursDisplay","Flex","jsx","styles","jsxs","ReceiptCheck","label","value","Trans","addressInline","formatPhoneNumber","DataView","amount"],"mappings":"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"}
|
|
@@ -1,59 +1,61 @@
|
|
|
1
1
|
import { ManagementContractorList as t } from "../ContractorList/management/ManagementContractorList.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
2
|
+
import { Dismissal as m } from "../Dismissal/Dismissal.js";
|
|
3
|
+
import { PaymentsList as f } from "../Payments/PaymentsList/PaymentsList.js";
|
|
4
|
+
import { CreatePayment as x } from "../Payments/CreatePayment/CreatePayment.js";
|
|
5
|
+
import { PaymentHistory as s } from "../Payments/PaymentHistory/PaymentHistory.js";
|
|
6
|
+
import { PaymentStatement as d } from "../Payments/PaymentStatement/PaymentStatement.js";
|
|
7
|
+
import { Address as P } from "../Address/management/Address.js";
|
|
8
|
+
import { AddressCard as l } from "../Address/management/AddressCard/AddressCard.js";
|
|
9
|
+
import { AddressEditForm as c } from "../Address/management/AddressEditForm.js";
|
|
10
|
+
import { Compensation as h } from "../Compensation/management/Compensation.js";
|
|
11
|
+
import { CompensationCard as E } from "../Compensation/management/CompensationCard/CompensationCard.js";
|
|
12
|
+
import { CompensationEditForm as L } from "../Compensation/management/CompensationEditForm.js";
|
|
13
|
+
import { ContractorListFlow as u } from "../ContractorListFlow/ContractorListFlow.js";
|
|
14
|
+
import { CreateHistoricalPayment as S } from "../Payments/CreateHistoricalPayment/CreateHistoricalPayment.js";
|
|
15
|
+
import { CreatePaymentFlow as g } from "../Payments/CreatePaymentFlow/CreatePaymentFlow.js";
|
|
16
|
+
import { Dashboard as j } from "../Dashboard/Dashboard.js";
|
|
17
|
+
import { DashboardFlow as q } from "../Dashboard/DashboardFlow.js";
|
|
18
|
+
import { DocumentsCard as z } from "../Documents/management/DocumentsCard/DocumentsCard.js";
|
|
19
|
+
import { HistoricalPaymentFlow as G } from "../Payments/HistoricalPaymentFlow/HistoricalPaymentFlow.js";
|
|
20
|
+
import { HistoricalPaymentSummary as J } from "../Payments/HistoricalPaymentSummary/HistoricalPaymentSummary.js";
|
|
21
|
+
import { PaymentFlow as N } from "../Payments/PaymentFlow/PaymentFlow.js";
|
|
22
|
+
import { PaymentMethod as Q } from "../PaymentMethod/management/PaymentMethod.js";
|
|
23
|
+
import { PaymentMethodCard as T } from "../PaymentMethod/management/PaymentMethodCard/PaymentMethodCard.js";
|
|
24
|
+
import { PaymentMethodEditForm as W } from "../PaymentMethod/management/PaymentMethodEditForm.js";
|
|
25
|
+
import { PaymentSummary as Y } from "../Payments/PaymentSummary/PaymentSummary.js";
|
|
26
|
+
import { Profile as _ } from "../Profile/management/Profile.js";
|
|
27
|
+
import { ProfileCard as oo } from "../Profile/management/ProfileCard/ProfileCard.js";
|
|
28
|
+
import { ProfileEditForm as to } from "../Profile/management/ProfileEditForm.js";
|
|
29
|
+
import { ViewPaymentFlow as mo } from "../Payments/ViewPaymentFlow/ViewPaymentFlow.js";
|
|
29
30
|
export {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
P as Address,
|
|
32
|
+
l as AddressCard,
|
|
33
|
+
c as AddressEditForm,
|
|
34
|
+
h as Compensation,
|
|
35
|
+
E as CompensationCard,
|
|
36
|
+
L as CompensationEditForm,
|
|
36
37
|
t as ContractorList,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
z as
|
|
45
|
-
G as
|
|
46
|
-
J as
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
Q as
|
|
50
|
-
T as
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
_ as
|
|
56
|
-
oo as
|
|
57
|
-
to as
|
|
38
|
+
u as ContractorListFlow,
|
|
39
|
+
S as CreateHistoricalPayment,
|
|
40
|
+
x as CreatePayment,
|
|
41
|
+
g as CreatePaymentFlow,
|
|
42
|
+
j as Dashboard,
|
|
43
|
+
q as DashboardFlow,
|
|
44
|
+
m as Dismissal,
|
|
45
|
+
z as DocumentsCard,
|
|
46
|
+
G as HistoricalPaymentFlow,
|
|
47
|
+
J as HistoricalPaymentSummary,
|
|
48
|
+
N as PaymentFlow,
|
|
49
|
+
s as PaymentHistory,
|
|
50
|
+
Q as PaymentMethod,
|
|
51
|
+
T as PaymentMethodCard,
|
|
52
|
+
W as PaymentMethodEditForm,
|
|
53
|
+
d as PaymentStatement,
|
|
54
|
+
Y as PaymentSummary,
|
|
55
|
+
f as PaymentsList,
|
|
56
|
+
_ as Profile,
|
|
57
|
+
oo as ProfileCard,
|
|
58
|
+
to as ProfileEditForm,
|
|
59
|
+
mo as ViewPaymentFlow
|
|
58
60
|
};
|
|
59
61
|
//# sourceMappingURL=contractorManagement.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contractorManagement.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"contractorManagement.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js
CHANGED
|
@@ -9,12 +9,15 @@ import "@gusto/embedded-api/models/errors/gustoembeddederror";
|
|
|
9
9
|
import "@gusto/embedded-api/models/errors/sdkvalidationerror";
|
|
10
10
|
import "@gusto/embedded-api/models/errors/unprocessableentityerror";
|
|
11
11
|
import "@gusto/embedded-api/models/errors/httpclienterrors";
|
|
12
|
+
import "dompurify";
|
|
13
|
+
import "../../../../../../contexts/LocaleProvider/useLocale.js";
|
|
12
14
|
import "../../../../../../shared/constants.js";
|
|
13
15
|
import "../../../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
16
|
+
import "../../../../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
|
|
14
17
|
import { createCompoundContext as t } from "../../../../../Base/createCompoundContext.js";
|
|
15
|
-
const [
|
|
18
|
+
const [v, P] = t("DocumentListContext");
|
|
16
19
|
export {
|
|
17
|
-
|
|
18
|
-
|
|
20
|
+
P as DocumentListProvider,
|
|
21
|
+
v as useDocumentList
|
|
19
22
|
};
|
|
20
23
|
//# sourceMappingURL=useDocumentList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDocumentList.js","sources":["../../../../../../../src/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.ts"],"sourcesContent":["import type { Form } from '@gusto/embedded-api/models/components/form'\nimport { createCompoundContext } from '@/components/Base'\n\ntype DocumentListContextType = {\n employeeForms: Form[]\n hasSignedAllForms: boolean\n handleContinue: () => void\n handleRequestFormToSign: (form: Form) => void\n documentListError: Error | null\n formToSign?: Form\n}\n\nconst [useDocumentList, DocumentListProvider] =\n createCompoundContext<DocumentListContextType>('DocumentListContext')\nexport { useDocumentList, DocumentListProvider }\n"],"names":["useDocumentList","DocumentListProvider","createCompoundContext"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useDocumentList.js","sources":["../../../../../../../src/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.ts"],"sourcesContent":["import type { Form } from '@gusto/embedded-api/models/components/form'\nimport { createCompoundContext } from '@/components/Base'\n\ntype DocumentListContextType = {\n employeeForms: Form[]\n hasSignedAllForms: boolean\n handleContinue: () => void\n handleRequestFormToSign: (form: Form) => void\n documentListError: Error | null\n formToSign?: Form\n}\n\nconst [useDocumentList, DocumentListProvider] =\n createCompoundContext<DocumentListContextType>('DocumentListContext')\nexport { useDocumentList, DocumentListProvider }\n"],"names":["useDocumentList","DocumentListProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;;;AAYA,MAAM,CAACA,GAAiBC,CAAoB,IAC1CC,EAA+C,qBAAqB;"}
|
|
@@ -18,12 +18,13 @@ import "@gusto/embedded-api/models/errors/httpclienterrors";
|
|
|
18
18
|
import { formatNumberAsCurrency as B } from "../../../helpers/formattedStrings.js";
|
|
19
19
|
import "../../../shared/constants.js";
|
|
20
20
|
import { useComponentContext as V } from "../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
21
|
+
import "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
|
|
21
22
|
import { useI18n as D } from "../../../i18n/I18n.js";
|
|
22
23
|
import { NumberInputField as E } from "../../Common/Fields/NumberInputField/NumberInputField.js";
|
|
23
24
|
const T = C.object({
|
|
24
25
|
netPay: C.number().positive()
|
|
25
26
|
});
|
|
26
|
-
function
|
|
27
|
+
function ue({ isOpen: n, onCalculateGrossUp: w, onApply: P, onCancel: p }) {
|
|
27
28
|
D("Payroll.GrossUpModal");
|
|
28
29
|
const { t: r } = z("Payroll.GrossUpModal"), { Modal: x, Heading: u, Text: i, Button: c, Alert: f } = V(), { baseSubmitHandler: y } = k(), A = F(null), [l, m] = o(null), [h, d] = o(null), [M, g] = o(!1), [N, v] = o(!1), s = R({
|
|
29
30
|
resolver: H(T),
|
|
@@ -113,6 +114,6 @@ function pe({ isOpen: n, onCalculateGrossUp: w, onApply: P, onCancel: p }) {
|
|
|
113
114
|
);
|
|
114
115
|
}
|
|
115
116
|
export {
|
|
116
|
-
|
|
117
|
+
ue as GrossUpModal
|
|
117
118
|
};
|
|
118
119
|
//# sourceMappingURL=GrossUpModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrossUpModal.js","sources":["../../../../src/components/Payroll/GrossUpModal/GrossUpModal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport type { GrossUpModalProps } from './GrossUpModalTypes'\nimport styles from './GrossUpModal.module.scss'\nimport { ActionsLayout, Flex, NumberInputField } from '@/components/Common'\nimport { useBase } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\n\nconst GrossUpFormSchema = z.object({\n netPay: z.number().positive(),\n})\n\ntype GrossUpFormValues = z.infer<typeof GrossUpFormSchema>\n\n/** @internal */\nexport function GrossUpModal({ isOpen, onCalculateGrossUp, onApply, onCancel }: GrossUpModalProps) {\n useI18n('Payroll.GrossUpModal')\n const { t } = useTranslation('Payroll.GrossUpModal')\n const { Modal, Heading, Text, Button, Alert } = useComponentContext()\n const { baseSubmitHandler } = useBase()\n const modalContainerRef = useRef<HTMLDivElement>(null)\n\n const [calculatedGrossUp, setCalculatedGrossUp] = useState<string | null>(null)\n const [errorMessage, setErrorMessage] = useState<string | null>(null)\n const [isCalculating, setIsCalculating] = useState(false)\n const [isApplying, setIsApplying] = useState(false)\n\n const formHandlers = useForm<GrossUpFormValues>({\n resolver: zodResolver(GrossUpFormSchema),\n // Start blank rather than 0: 0 is not a valid net amount, and a leading 0\n // in the field means typing an amount produces values like \"0350\".\n defaultValues: {},\n })\n\n useEffect(() => {\n if (!isOpen) {\n formHandlers.reset()\n setCalculatedGrossUp(null)\n setErrorMessage(null)\n }\n }, [isOpen, formHandlers.reset])\n\n const handleCalculate = async (data: GrossUpFormValues) => {\n setErrorMessage(null)\n setCalculatedGrossUp(null)\n setIsCalculating(true)\n\n await baseSubmitHandler(null, async () => {\n try {\n const result = await onCalculateGrossUp(data.netPay)\n\n if (result) {\n setCalculatedGrossUp(result)\n } else {\n setErrorMessage(t('errorMessage'))\n }\n } finally {\n setIsCalculating(false)\n }\n })\n }\n\n const handleApply = async () => {\n if (calculatedGrossUp) {\n setIsApplying(true)\n await baseSubmitHandler(null, async () => {\n try {\n await onApply(calculatedGrossUp)\n } finally {\n setIsApplying(false)\n }\n })\n }\n }\n\n return (\n <Modal\n isOpen={isOpen}\n onClose={onCancel}\n containerRef={modalContainerRef}\n footer={\n <ActionsLayout>\n <Button\n variant=\"primary\"\n isDisabled={!calculatedGrossUp}\n onClick={handleApply}\n isLoading={isApplying}\n >\n {t('applyCta')}\n </Button>\n <Button variant=\"secondary\" onClick={onCancel}>\n {t('cancelCta')}\n </Button>\n </ActionsLayout>\n }\n >\n <FormProvider {...formHandlers}>\n <div className={styles.header}>\n <Heading as=\"h2\" styledAs=\"h3\">\n {t('title')}\n </Heading>\n <Text variant=\"supporting\" as=\"p\">\n {t('description')}\n </Text>\n </div>\n\n <div className={styles.content}>\n {errorMessage && (\n <div className={styles.alert}>\n <Alert label={errorMessage} status=\"error\" disableScrollIntoView />\n </div>\n )}\n\n <div className={styles.alert}>\n <Alert label={t('warning')} status=\"warning\" disableScrollIntoView />\n </div>\n\n {/* Bottom-align on the row itself: the .calculateButton align-self\n rule below only targets the default (react-aria) adapter, so in\n other adapters the button otherwise falls back to flex-start. */}\n <Flex flexDirection=\"row\" gap={8} alignItems=\"flex-end\">\n <NumberInputField\n name=\"netPay\"\n label={t('netPayLabel')}\n format=\"currency\"\n adornmentStart=\"$\"\n errorMessage={t('validations.netPay')}\n min={0}\n isRequired\n />\n <Button\n variant=\"secondary\"\n className={styles.calculateButton}\n isLoading={isCalculating}\n onClick={formHandlers.handleSubmit(handleCalculate)}\n >\n {t('calculateCta')}\n </Button>\n </Flex>\n\n {calculatedGrossUp ? (\n <div className={styles.result}>\n <Text size=\"sm\" variant=\"supporting\" weight=\"semibold\">\n {t('grossPayResult')}\n </Text>\n <Heading as=\"h3\">{formatNumberAsCurrency(parseFloat(calculatedGrossUp))}</Heading>\n </div>\n ) : (\n <Text size=\"sm\" variant=\"supporting\">\n {t('applyHint')}\n </Text>\n )}\n </div>\n </FormProvider>\n </Modal>\n )\n}\n"],"names":["GrossUpFormSchema","z","GrossUpModal","isOpen","onCalculateGrossUp","onApply","onCancel","useI18n","t","useTranslation","Modal","Heading","Text","Button","Alert","useComponentContext","baseSubmitHandler","useBase","modalContainerRef","useRef","calculatedGrossUp","setCalculatedGrossUp","useState","errorMessage","setErrorMessage","isCalculating","setIsCalculating","isApplying","setIsApplying","formHandlers","useForm","zodResolver","useEffect","handleCalculate","data","result","jsx","ActionsLayout","jsxs","FormProvider","styles","Flex","NumberInputField"],"mappings":"
|
|
1
|
+
{"version":3,"file":"GrossUpModal.js","sources":["../../../../src/components/Payroll/GrossUpModal/GrossUpModal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport type { GrossUpModalProps } from './GrossUpModalTypes'\nimport styles from './GrossUpModal.module.scss'\nimport { ActionsLayout, Flex, NumberInputField } from '@/components/Common'\nimport { useBase } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\n\nconst GrossUpFormSchema = z.object({\n netPay: z.number().positive(),\n})\n\ntype GrossUpFormValues = z.infer<typeof GrossUpFormSchema>\n\n/** @internal */\nexport function GrossUpModal({ isOpen, onCalculateGrossUp, onApply, onCancel }: GrossUpModalProps) {\n useI18n('Payroll.GrossUpModal')\n const { t } = useTranslation('Payroll.GrossUpModal')\n const { Modal, Heading, Text, Button, Alert } = useComponentContext()\n const { baseSubmitHandler } = useBase()\n const modalContainerRef = useRef<HTMLDivElement>(null)\n\n const [calculatedGrossUp, setCalculatedGrossUp] = useState<string | null>(null)\n const [errorMessage, setErrorMessage] = useState<string | null>(null)\n const [isCalculating, setIsCalculating] = useState(false)\n const [isApplying, setIsApplying] = useState(false)\n\n const formHandlers = useForm<GrossUpFormValues>({\n resolver: zodResolver(GrossUpFormSchema),\n // Start blank rather than 0: 0 is not a valid net amount, and a leading 0\n // in the field means typing an amount produces values like \"0350\".\n defaultValues: {},\n })\n\n useEffect(() => {\n if (!isOpen) {\n formHandlers.reset()\n setCalculatedGrossUp(null)\n setErrorMessage(null)\n }\n }, [isOpen, formHandlers.reset])\n\n const handleCalculate = async (data: GrossUpFormValues) => {\n setErrorMessage(null)\n setCalculatedGrossUp(null)\n setIsCalculating(true)\n\n await baseSubmitHandler(null, async () => {\n try {\n const result = await onCalculateGrossUp(data.netPay)\n\n if (result) {\n setCalculatedGrossUp(result)\n } else {\n setErrorMessage(t('errorMessage'))\n }\n } finally {\n setIsCalculating(false)\n }\n })\n }\n\n const handleApply = async () => {\n if (calculatedGrossUp) {\n setIsApplying(true)\n await baseSubmitHandler(null, async () => {\n try {\n await onApply(calculatedGrossUp)\n } finally {\n setIsApplying(false)\n }\n })\n }\n }\n\n return (\n <Modal\n isOpen={isOpen}\n onClose={onCancel}\n containerRef={modalContainerRef}\n footer={\n <ActionsLayout>\n <Button\n variant=\"primary\"\n isDisabled={!calculatedGrossUp}\n onClick={handleApply}\n isLoading={isApplying}\n >\n {t('applyCta')}\n </Button>\n <Button variant=\"secondary\" onClick={onCancel}>\n {t('cancelCta')}\n </Button>\n </ActionsLayout>\n }\n >\n <FormProvider {...formHandlers}>\n <div className={styles.header}>\n <Heading as=\"h2\" styledAs=\"h3\">\n {t('title')}\n </Heading>\n <Text variant=\"supporting\" as=\"p\">\n {t('description')}\n </Text>\n </div>\n\n <div className={styles.content}>\n {errorMessage && (\n <div className={styles.alert}>\n <Alert label={errorMessage} status=\"error\" disableScrollIntoView />\n </div>\n )}\n\n <div className={styles.alert}>\n <Alert label={t('warning')} status=\"warning\" disableScrollIntoView />\n </div>\n\n {/* Bottom-align on the row itself: the .calculateButton align-self\n rule below only targets the default (react-aria) adapter, so in\n other adapters the button otherwise falls back to flex-start. */}\n <Flex flexDirection=\"row\" gap={8} alignItems=\"flex-end\">\n <NumberInputField\n name=\"netPay\"\n label={t('netPayLabel')}\n format=\"currency\"\n adornmentStart=\"$\"\n errorMessage={t('validations.netPay')}\n min={0}\n isRequired\n />\n <Button\n variant=\"secondary\"\n className={styles.calculateButton}\n isLoading={isCalculating}\n onClick={formHandlers.handleSubmit(handleCalculate)}\n >\n {t('calculateCta')}\n </Button>\n </Flex>\n\n {calculatedGrossUp ? (\n <div className={styles.result}>\n <Text size=\"sm\" variant=\"supporting\" weight=\"semibold\">\n {t('grossPayResult')}\n </Text>\n <Heading as=\"h3\">{formatNumberAsCurrency(parseFloat(calculatedGrossUp))}</Heading>\n </div>\n ) : (\n <Text size=\"sm\" variant=\"supporting\">\n {t('applyHint')}\n </Text>\n )}\n </div>\n </FormProvider>\n </Modal>\n )\n}\n"],"names":["GrossUpFormSchema","z","GrossUpModal","isOpen","onCalculateGrossUp","onApply","onCancel","useI18n","t","useTranslation","Modal","Heading","Text","Button","Alert","useComponentContext","baseSubmitHandler","useBase","modalContainerRef","useRef","calculatedGrossUp","setCalculatedGrossUp","useState","errorMessage","setErrorMessage","isCalculating","setIsCalculating","isApplying","setIsApplying","formHandlers","useForm","zodResolver","useEffect","handleCalculate","data","result","jsx","ActionsLayout","jsxs","FormProvider","styles","Flex","NumberInputField"],"mappings":"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"}
|