@gusto/embedded-react-sdk 0.10.6 → 0.10.7
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 +7 -0
- package/dist/components/Base/Base.js +19 -18
- package/dist/components/Base/Base.js.map +1 -1
- package/dist/components/Common/SignatureForm/SignatureForm.js +6 -4
- package/dist/components/Common/SignatureForm/SignatureForm.js.map +1 -1
- package/dist/components/Common/SignatureForm/SignatureFormActions.js +7 -6
- package/dist/components/Common/SignatureForm/SignatureFormActions.js.map +1 -1
- package/dist/components/Common/SignatureForm/SignatureFormFields.js +8 -7
- package/dist/components/Common/SignatureForm/SignatureFormFields.js.map +1 -1
- package/dist/components/Common/TaxInputs/TaxInputs.d.ts +5 -1
- package/dist/components/Common/TaxInputs/TaxInputs.js +64 -56
- package/dist/components/Common/TaxInputs/TaxInputs.js.map +1 -1
- package/dist/components/Company/AssignSignatory/AssignSignatory.js +13 -11
- package/dist/components/Company/AssignSignatory/AssignSignatory.js.map +1 -1
- package/dist/components/Company/AssignSignatory/AssignSignatorySelection.js +1 -1
- package/dist/components/Company/AssignSignatory/CreateSignatory/Actions.js +1 -1
- package/dist/components/Company/AssignSignatory/CreateSignatory/CreateSignatory.js +1 -0
- package/dist/components/Company/AssignSignatory/CreateSignatory/CreateSignatory.js.map +1 -1
- package/dist/components/Company/AssignSignatory/CreateSignatory/CreateSignatoryForm.js +3 -2
- package/dist/components/Company/AssignSignatory/CreateSignatory/CreateSignatoryForm.js.map +1 -1
- package/dist/components/Company/AssignSignatory/CreateSignatory/useCreateSignatory.js +1 -1
- package/dist/components/Company/AssignSignatory/InviteSignatory/Actions.js +1 -1
- package/dist/components/Company/AssignSignatory/InviteSignatory/InviteSignatory.js +4 -3
- package/dist/components/Company/AssignSignatory/InviteSignatory/InviteSignatory.js.map +1 -1
- package/dist/components/Company/AssignSignatory/InviteSignatory/InviteSignatoryForm.js +10 -9
- package/dist/components/Company/AssignSignatory/InviteSignatory/InviteSignatoryForm.js.map +1 -1
- package/dist/components/Company/AssignSignatory/InviteSignatory/useInviteSignatory.js +1 -1
- package/dist/components/Company/AssignSignatory/TitleSelect.js +8 -7
- package/dist/components/Company/AssignSignatory/TitleSelect.js.map +1 -1
- package/dist/components/Company/AssignSignatory/useAssignSignatory.js +1 -1
- package/dist/components/Company/BankAccount/BankAccountForm/Actions.js +9 -8
- package/dist/components/Company/BankAccount/BankAccountForm/Actions.js.map +1 -1
- package/dist/components/Company/BankAccount/BankAccountForm/Form.js +8 -7
- package/dist/components/Company/BankAccount/BankAccountForm/Form.js.map +1 -1
- package/dist/components/Company/BankAccount/BankAccountForm/context.js +1 -1
- package/dist/components/Company/BankAccount/BankAccountList/Actions.js +1 -1
- package/dist/components/Company/BankAccount/BankAccountVerify/Actions.js +1 -1
- package/dist/components/Company/BankAccount/BankAccountVerify/Form.js +5 -4
- package/dist/components/Company/BankAccount/BankAccountVerify/Form.js.map +1 -1
- package/dist/components/Company/DocumentSigner/DocumentList/Actions.js +1 -1
- package/dist/components/Company/DocumentSigner/DocumentList/DocumentList.js +17 -15
- package/dist/components/Company/DocumentSigner/DocumentList/DocumentList.js.map +1 -1
- package/dist/components/Company/DocumentSigner/DocumentList/useDocumentList.js +1 -1
- package/dist/components/Company/DocumentSigner/SignatureForm/SignatureForm.js +9 -7
- package/dist/components/Company/DocumentSigner/SignatureForm/SignatureForm.js.map +1 -1
- package/dist/components/Company/DocumentSigner/SignatureForm/useSignatureForm.js +1 -1
- package/dist/components/Company/FederalTaxes/Actions.js +1 -1
- package/dist/components/Company/FederalTaxes/FederalTaxes.js +17 -15
- package/dist/components/Company/FederalTaxes/FederalTaxes.js.map +1 -1
- package/dist/components/Company/FederalTaxes/Form.js +3 -2
- package/dist/components/Company/FederalTaxes/Form.js.map +1 -1
- package/dist/components/Company/FederalTaxes/useFederalTaxes.js +1 -1
- package/dist/components/Company/Industry/Actions.js +1 -1
- package/dist/components/Company/Industry/Context.js +1 -1
- package/dist/components/Company/Industry/Edit.js +1 -1
- package/dist/components/Company/Locations/LocationForm/Actions.js +1 -1
- package/dist/components/Company/Locations/LocationForm/Form.js +5 -4
- package/dist/components/Company/Locations/LocationForm/Form.js.map +1 -1
- package/dist/components/Company/Locations/LocationForm/LocationForm.js +9 -7
- package/dist/components/Company/Locations/LocationForm/LocationForm.js.map +1 -1
- package/dist/components/Company/Locations/LocationForm/useLocationForm.js +1 -1
- package/dist/components/Company/Locations/LocationsList/Actions.js +1 -1
- package/dist/components/Company/Locations/LocationsList/List.js +1 -1
- package/dist/components/Company/Locations/LocationsList/LocationsList.js +11 -9
- package/dist/components/Company/Locations/LocationsList/LocationsList.js.map +1 -1
- package/dist/components/Company/Locations/LocationsList/useLocationsList.js +1 -1
- package/dist/components/Company/OnboardingOverview/Completed.js +6 -5
- package/dist/components/Company/OnboardingOverview/Completed.js.map +1 -1
- package/dist/components/Company/OnboardingOverview/MissingRequirements.js +3 -2
- package/dist/components/Company/OnboardingOverview/MissingRequirements.js.map +1 -1
- package/dist/components/Company/OnboardingOverview/OnboardingOverview.js +4 -2
- package/dist/components/Company/OnboardingOverview/OnboardingOverview.js.map +1 -1
- package/dist/components/Company/OnboardingOverview/context.js +1 -1
- package/dist/components/Company/PaySchedule/PaySchedule.js +18 -16
- package/dist/components/Company/PaySchedule/PaySchedule.js.map +1 -1
- package/dist/components/Company/PaySchedule/_parts/Actions.js +1 -1
- package/dist/components/Company/PaySchedule/_parts/Edit.js +26 -25
- package/dist/components/Company/PaySchedule/_parts/Edit.js.map +1 -1
- package/dist/components/Company/PaySchedule/_parts/Head.js +3 -2
- package/dist/components/Company/PaySchedule/_parts/Head.js.map +1 -1
- package/dist/components/Company/PaySchedule/_parts/List.js +6 -5
- package/dist/components/Company/PaySchedule/_parts/List.js.map +1 -1
- package/dist/components/Company/PaySchedule/usePaySchedule.js +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesForm/Actions.js +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesForm/StateTaxesForm.js +65 -59
- package/dist/components/Company/StateTaxes/StateTaxesForm/StateTaxesForm.js.map +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesForm/context.js +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesList/Actions.js +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesList/List.js +1 -1
- package/dist/components/Company/StateTaxes/StateTaxesList/context.js +1 -1
- package/dist/components/Contractor/Address/Address.js +2 -0
- package/dist/components/Contractor/Address/Address.js.map +1 -1
- package/dist/components/Contractor/Address/Form.js +7 -6
- package/dist/components/Contractor/Address/Form.js.map +1 -1
- package/dist/components/Contractor/Address/useAddress.js +1 -1
- package/dist/components/Contractor/List/index.js +3 -2
- package/dist/components/Contractor/List/index.js.map +1 -1
- package/dist/components/Contractor/NewHireReport/NewHireReport.js +17 -16
- package/dist/components/Contractor/NewHireReport/NewHireReport.js.map +1 -1
- package/dist/components/Contractor/PaymentMethod/BankAccountForm.js +1 -1
- package/dist/components/Contractor/PaymentMethod/PaymentMethod.js +3 -2
- package/dist/components/Contractor/PaymentMethod/PaymentMethod.js.map +1 -1
- package/dist/components/Contractor/PaymentMethod/PaymentTypeForm.js +3 -2
- package/dist/components/Contractor/PaymentMethod/PaymentTypeForm.js.map +1 -1
- package/dist/components/Employee/Compensation/Actions.js +6 -5
- package/dist/components/Employee/Compensation/Actions.js.map +1 -1
- package/dist/components/Employee/Compensation/Edit.js +3 -2
- package/dist/components/Employee/Compensation/Edit.js.map +1 -1
- package/dist/components/Employee/Compensation/List.js +1 -1
- package/dist/components/Employee/Deductions/Actions.js +1 -1
- package/dist/components/Employee/Deductions/DeductionForm.js +1 -1
- package/dist/components/Employee/Deductions/DeductionsList.js +1 -1
- package/dist/components/Employee/Deductions/IncludeDeductionsForm.js +1 -1
- package/dist/components/Employee/Deductions/useDeductions.js +1 -1
- package/dist/components/Employee/DocumentSigner/DocumentList/Actions.js +1 -1
- package/dist/components/Employee/DocumentSigner/DocumentList/DocumentList.js +12 -10
- package/dist/components/Employee/DocumentSigner/DocumentList/DocumentList.js.map +1 -1
- package/dist/components/Employee/DocumentSigner/DocumentList/List.js +3 -2
- package/dist/components/Employee/DocumentSigner/DocumentList/List.js.map +1 -1
- package/dist/components/Employee/DocumentSigner/DocumentList/useDocumentList.js +1 -1
- package/dist/components/Employee/DocumentSigner/SignatureForm/SignatureForm.js +10 -8
- package/dist/components/Employee/DocumentSigner/SignatureForm/SignatureForm.js.map +1 -1
- package/dist/components/Employee/DocumentSigner/SignatureForm/useSignatureForm.js +1 -1
- package/dist/components/Employee/EmployeeList/Actions.js +1 -1
- package/dist/components/Employee/EmployeeList/EmployeeList.js +4 -2
- package/dist/components/Employee/EmployeeList/EmployeeList.js.map +1 -1
- package/dist/components/Employee/EmployeeList/Head.js +3 -2
- package/dist/components/Employee/EmployeeList/Head.js.map +1 -1
- package/dist/components/Employee/EmployeeList/List.js +15 -14
- package/dist/components/Employee/EmployeeList/List.js.map +1 -1
- package/dist/components/Employee/EmployeeList/useEmployeeList.js +1 -1
- package/dist/components/Employee/Landing/Landing.js +7 -6
- package/dist/components/Employee/Landing/Landing.js.map +1 -1
- package/dist/components/Employee/PaymentMethod/Actions.js +1 -1
- package/dist/components/Employee/PaymentMethod/BankAccountEdit.js +3 -2
- package/dist/components/Employee/PaymentMethod/BankAccountEdit.js.map +1 -1
- package/dist/components/Employee/PaymentMethod/BankAccountsList.js +1 -1
- package/dist/components/Employee/PaymentMethod/PaymentTypeForm.js +3 -2
- package/dist/components/Employee/PaymentMethod/PaymentTypeForm.js.map +1 -1
- package/dist/components/Employee/PaymentMethod/Split.js +4 -3
- package/dist/components/Employee/PaymentMethod/Split.js.map +1 -1
- package/dist/components/Employee/PaymentMethod/usePaymentMethod.js +1 -1
- package/dist/components/Employee/Profile/Actions.js +1 -1
- package/dist/components/Employee/Profile/AdminPersonalDetails.js +10 -9
- package/dist/components/Employee/Profile/AdminPersonalDetails.js.map +1 -1
- package/dist/components/Employee/Profile/HomeAddress.js +5 -4
- package/dist/components/Employee/Profile/HomeAddress.js.map +1 -1
- package/dist/components/Employee/Profile/PersonalDetailsInputs.js +1 -1
- package/dist/components/Employee/Profile/useProfile.js +1 -1
- package/dist/components/Employee/Taxes/Actions.js +1 -1
- package/dist/components/Employee/Taxes/FederalForm.js +1 -1
- package/dist/components/Employee/Taxes/useTaxes.js +1 -1
- package/dist/contexts/GustoProvider/GustoProviderCustomUIAdapter.js +1 -1
- package/dist/i18n/en/Company.StateTaxes.json.js +2 -1
- package/dist/i18n/en/Company.StateTaxes.json.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/i18next.d.ts +1 -0
- package/package.json +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as r, jsxs as m } from "react/jsx-runtime";
|
|
2
2
|
import { useFormContext as S, useWatch as u } from "react-hook-form";
|
|
3
3
|
import { useTranslation as T } from "react-i18next";
|
|
4
4
|
import { useState as N, useEffect as h } from "react";
|
|
@@ -6,6 +6,7 @@ import { usePaySchedule as x } from "../usePaySchedule.js";
|
|
|
6
6
|
import n from "./Edit.module.scss.js";
|
|
7
7
|
import { Flex as f } from "../../../Common/Flex/Flex.js";
|
|
8
8
|
import { Grid as E } from "../../../Common/Grid/Grid.js";
|
|
9
|
+
import "classnames";
|
|
9
10
|
import { useComponentContext as R } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
10
11
|
import { formatDateNamedWeekdayShortPlusDate as P } from "../../../../helpers/dateFormatting.js";
|
|
11
12
|
import { TextInputField as O } from "../../../Common/Fields/TextInputField/TextInputField.js";
|
|
@@ -13,16 +14,16 @@ import { SelectField as v } from "../../../Common/Fields/SelectField/SelectField
|
|
|
13
14
|
import { RadioGroupField as F } from "../../../Common/Fields/RadioGroupField/RadioGroupField.js";
|
|
14
15
|
import { NumberInputField as D } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
|
|
15
16
|
import { DatePickerField as w } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
|
|
16
|
-
const
|
|
17
|
-
const d = R(), { t: e } = T("Company.PaySchedule"), { payPeriodPreview: t, mode: p, payPreviewLoading: b } = x(), { setValue: o } = S(), [
|
|
17
|
+
const J = () => {
|
|
18
|
+
const d = R(), { t: e } = T("Company.PaySchedule"), { payPeriodPreview: t, mode: p, payPreviewLoading: b } = x(), { setValue: o } = S(), [a, g] = N(0), i = u({ name: "frequency" }), l = u({ name: "customTwicePerMonth" }), y = u({ name: "payPeriodPreviewRange" }), q = i === "Twice per month" && l === "custom" || i === "Monthly", C = i === "Twice per month" && l === "custom";
|
|
18
19
|
return h(() => {
|
|
19
20
|
i === "Twice per month" && l === "1st15th" && (o("day1", 15), o("day2", 31));
|
|
20
21
|
}, [i, l, o]), h(() => {
|
|
21
|
-
y === void 0 && o("payPeriodPreviewRange",
|
|
22
|
-
}, [
|
|
23
|
-
/* @__PURE__ */
|
|
24
|
-
/* @__PURE__ */
|
|
25
|
-
/* @__PURE__ */
|
|
22
|
+
y === void 0 && o("payPeriodPreviewRange", a);
|
|
23
|
+
}, [a, o, y]), p !== "EDIT_PAY_SCHEDULE" && p !== "ADD_PAY_SCHEDULE" ? null : /* @__PURE__ */ r("div", { className: n.payScheduleContainer, children: /* @__PURE__ */ m(E, { gap: 32, gridTemplateColumns: { base: "1fr", small: "1fr 1fr" }, children: [
|
|
24
|
+
/* @__PURE__ */ r("div", { className: n.payScheduleForm, children: /* @__PURE__ */ m(f, { flexDirection: "column", children: [
|
|
25
|
+
/* @__PURE__ */ r(O, { name: "customName", label: "Name", isRequired: !0 }),
|
|
26
|
+
/* @__PURE__ */ r(
|
|
26
27
|
v,
|
|
27
28
|
{
|
|
28
29
|
name: "frequency",
|
|
@@ -36,7 +37,7 @@ const z = () => {
|
|
|
36
37
|
isRequired: !0
|
|
37
38
|
}
|
|
38
39
|
),
|
|
39
|
-
i === "Twice per month" && /* @__PURE__ */
|
|
40
|
+
i === "Twice per month" && /* @__PURE__ */ r(
|
|
40
41
|
F,
|
|
41
42
|
{
|
|
42
43
|
name: "customTwicePerMonth",
|
|
@@ -48,7 +49,7 @@ const z = () => {
|
|
|
48
49
|
]
|
|
49
50
|
}
|
|
50
51
|
),
|
|
51
|
-
/* @__PURE__ */
|
|
52
|
+
/* @__PURE__ */ r(
|
|
52
53
|
w,
|
|
53
54
|
{
|
|
54
55
|
name: "anchorPayDate",
|
|
@@ -57,7 +58,7 @@ const z = () => {
|
|
|
57
58
|
isRequired: !0
|
|
58
59
|
}
|
|
59
60
|
),
|
|
60
|
-
/* @__PURE__ */
|
|
61
|
+
/* @__PURE__ */ r(
|
|
61
62
|
w,
|
|
62
63
|
{
|
|
63
64
|
name: "anchorEndOfPayPeriod",
|
|
@@ -66,11 +67,11 @@ const z = () => {
|
|
|
66
67
|
isRequired: !0
|
|
67
68
|
}
|
|
68
69
|
),
|
|
69
|
-
/* @__PURE__ */
|
|
70
|
-
/* @__PURE__ */
|
|
70
|
+
/* @__PURE__ */ r("div", { className: q ? "" : n.visuallyHidden, children: /* @__PURE__ */ r(D, { name: "day1", label: e("labels.firstPayDayOfTheMonth"), isRequired: !0 }) }),
|
|
71
|
+
/* @__PURE__ */ r("div", { className: C ? "" : n.visuallyHidden, children: /* @__PURE__ */ r(D, { name: "day2", label: e("labels.lastPayDayOfTheMonth"), isRequired: !0 }) })
|
|
71
72
|
] }) }),
|
|
72
|
-
/* @__PURE__ */
|
|
73
|
-
!b && /* @__PURE__ */
|
|
73
|
+
/* @__PURE__ */ r(f, { flexDirection: "column", gap: 4, justifyContent: "center", alignItems: "center", children: t && t[a] ? /* @__PURE__ */ m("div", { className: n.calendarContainer, children: [
|
|
74
|
+
!b && /* @__PURE__ */ r(
|
|
74
75
|
v,
|
|
75
76
|
{
|
|
76
77
|
name: "payPeriodPreviewRange",
|
|
@@ -79,42 +80,42 @@ const z = () => {
|
|
|
79
80
|
value: String(c),
|
|
80
81
|
label: `${P(s.startDate)} – ${P(s.endDate)}`
|
|
81
82
|
})),
|
|
82
|
-
defaultValue: String(
|
|
83
|
+
defaultValue: String(a),
|
|
83
84
|
onChange: (s) => {
|
|
84
85
|
const c = Number(s);
|
|
85
86
|
isNaN(c) || g(c);
|
|
86
87
|
}
|
|
87
88
|
}
|
|
88
89
|
),
|
|
89
|
-
/* @__PURE__ */
|
|
90
|
+
/* @__PURE__ */ r(
|
|
90
91
|
d.CalendarPreview,
|
|
91
92
|
{
|
|
92
93
|
dateRange: {
|
|
93
|
-
start: new Date(t[
|
|
94
|
-
end: new Date(t[
|
|
94
|
+
start: new Date(t[a].startDate),
|
|
95
|
+
end: new Date(t[a].endDate),
|
|
95
96
|
label: e("payPreview.payPeriod") || "Pay Period"
|
|
96
97
|
},
|
|
97
98
|
highlightDates: [
|
|
98
99
|
{
|
|
99
|
-
date: new Date(t[
|
|
100
|
+
date: new Date(t[a].checkDate),
|
|
100
101
|
highlightColor: "primary",
|
|
101
102
|
label: e("payPreview.payday") || "Payday"
|
|
102
103
|
},
|
|
103
104
|
{
|
|
104
|
-
date: new Date(t[
|
|
105
|
+
date: new Date(t[a].runPayrollBy),
|
|
105
106
|
highlightColor: "secondary",
|
|
106
107
|
label: e("payPreview.payrollDeadline") || "Payroll Deadline"
|
|
107
108
|
}
|
|
108
109
|
]
|
|
109
110
|
},
|
|
110
|
-
|
|
111
|
+
a
|
|
111
112
|
)
|
|
112
|
-
] }) : /* @__PURE__ */
|
|
113
|
+
] }) : /* @__PURE__ */ r("div", { className: n.calendarContainer, children: /* @__PURE__ */ r(
|
|
113
114
|
d.Alert,
|
|
114
115
|
{
|
|
115
116
|
status: "info",
|
|
116
117
|
label: e("previewAlert.title", "Pay Schedule Preview"),
|
|
117
|
-
children: /* @__PURE__ */
|
|
118
|
+
children: /* @__PURE__ */ r(d.Text, { children: e(
|
|
118
119
|
"previewAlert.description",
|
|
119
120
|
"Complete all the required fields on the left to see a preview of your pay schedule."
|
|
120
121
|
) })
|
|
@@ -123,6 +124,6 @@ const z = () => {
|
|
|
123
124
|
] }) });
|
|
124
125
|
};
|
|
125
126
|
export {
|
|
126
|
-
|
|
127
|
+
J as Edit
|
|
127
128
|
};
|
|
128
129
|
//# sourceMappingURL=Edit.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Edit.js","sources":["../../../../../src/components/Company/PaySchedule/_parts/Edit.tsx"],"sourcesContent":["import { useFormContext, useWatch } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { useEffect, useState } from 'react'\nimport type { PayScheduleInputs } from '../usePaySchedule'\nimport { usePaySchedule } from '../usePaySchedule'\nimport style from './Edit.module.scss'\nimport {\n Flex,\n SelectField,\n RadioGroupField,\n Grid,\n TextInputField,\n NumberInputField,\n DatePickerField,\n} from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { formatDateNamedWeekdayShortPlusDate } from '@/helpers/dateFormatting'\n\nexport const Edit = () => {\n const Components = useComponentContext()\n const { t } = useTranslation('Company.PaySchedule')\n const { payPeriodPreview, mode, payPreviewLoading } = usePaySchedule()\n const { setValue } = useFormContext<PayScheduleInputs>()\n const [selectedPayPeriodIndex, setSelectedPayPeriodIndex] = useState<number>(0)\n\n const frequency = useWatch({ name: 'frequency' })\n const customTwicePerMonth = useWatch({ name: 'customTwicePerMonth' })\n const payPeriodPreviewRange = useWatch({ name: 'payPeriodPreviewRange' })\n\n const shouldShowDay1 =\n (frequency === 'Twice per month' && customTwicePerMonth === 'custom') || frequency === 'Monthly'\n const shouldShowDay2 = frequency === 'Twice per month' && customTwicePerMonth === 'custom'\n\n useEffect(() => {\n if (frequency === 'Twice per month' && customTwicePerMonth === '1st15th') {\n setValue('day1', 15)\n setValue('day2', 31)\n }\n }, [frequency, customTwicePerMonth, setValue])\n\n // This is a workaround to ensure that the pay period preview range is set when the selected pay period index changes\n // TODO: Once we have a RHF free select, that can be used and this effect can be removed\n useEffect(() => {\n if (payPeriodPreviewRange === undefined) {\n setValue('payPeriodPreviewRange', selectedPayPeriodIndex)\n }\n }, [selectedPayPeriodIndex, setValue, payPeriodPreviewRange])\n\n if (mode !== 'EDIT_PAY_SCHEDULE' && mode !== 'ADD_PAY_SCHEDULE') {\n return null\n }\n\n return (\n <div className={style.payScheduleContainer}>\n <Grid gap={32} gridTemplateColumns={{ base: '1fr', small: '1fr 1fr' }}>\n <div className={style.payScheduleForm}>\n <Flex flexDirection={'column'}>\n <TextInputField name=\"customName\" label=\"Name\" isRequired />\n <SelectField\n name=\"frequency\"\n label={t('labels.frequency')}\n options={[\n { value: 'Every week', label: t('frequencies.everyWeek') },\n { value: 'Every other week', label: t('frequencies.everyOtherWeek') },\n { value: 'Twice per month', label: t('frequencies.twicePerMonth') },\n { value: 'Monthly', label: t('frequencies.monthly') },\n ]}\n isRequired\n />\n {frequency === 'Twice per month' && (\n <RadioGroupField\n name=\"customTwicePerMonth\"\n label={t('labels.frequencyOptions')}\n description={t('descriptions.frequencyOptionsDescription')}\n options={[\n { value: '1st15th', label: t('frequencyOptions.15thAndLast') },\n { value: 'custom', label: t('frequencyOptions.custom') },\n ]}\n />\n )}\n <DatePickerField\n name=\"anchorPayDate\"\n label={t('labels.firstPayDate')}\n description={t('descriptions.anchorPayDateDescription')}\n isRequired\n />\n <DatePickerField\n name=\"anchorEndOfPayPeriod\"\n label={t('labels.firstPayPeriodEndDate')}\n description={t('descriptions.anchorEndOfPayPeriodDescription')}\n isRequired\n />\n <div className={shouldShowDay1 ? '' : style.visuallyHidden}>\n <NumberInputField name=\"day1\" label={t('labels.firstPayDayOfTheMonth')} isRequired />\n </div>\n <div className={shouldShowDay2 ? '' : style.visuallyHidden}>\n <NumberInputField name=\"day2\" label={t('labels.lastPayDayOfTheMonth')} isRequired />\n </div>\n </Flex>\n </div>\n <Flex flexDirection=\"column\" gap={4} justifyContent=\"center\" alignItems=\"center\">\n {payPeriodPreview && payPeriodPreview[selectedPayPeriodIndex] ? (\n <div className={style.calendarContainer}>\n {!payPreviewLoading && (\n <SelectField\n name=\"payPeriodPreviewRange\"\n label={t('labels.preview')}\n options={payPeriodPreview.map((period, index) => {\n return {\n value: String(index),\n label: `${formatDateNamedWeekdayShortPlusDate(period.startDate)} – ${formatDateNamedWeekdayShortPlusDate(period.endDate)}`,\n }\n })}\n defaultValue={String(selectedPayPeriodIndex)}\n onChange={(value: string) => {\n const numericValue = Number(value)\n if (!isNaN(numericValue)) {\n setSelectedPayPeriodIndex(numericValue)\n }\n }}\n />\n )}\n <Components.CalendarPreview\n key={selectedPayPeriodIndex}\n dateRange={{\n start: new Date(payPeriodPreview[selectedPayPeriodIndex].startDate as string),\n end: new Date(payPeriodPreview[selectedPayPeriodIndex].endDate as string),\n label: t('payPreview.payPeriod') || 'Pay Period',\n }}\n highlightDates={[\n {\n date: new Date(payPeriodPreview[selectedPayPeriodIndex].checkDate as string),\n highlightColor: 'primary',\n label: t('payPreview.payday') || 'Payday',\n },\n {\n date: new Date(payPeriodPreview[selectedPayPeriodIndex].runPayrollBy as string),\n highlightColor: 'secondary',\n label: t('payPreview.payrollDeadline') || 'Payroll Deadline',\n },\n ]}\n />\n </div>\n ) : (\n <div className={style.calendarContainer}>\n <Components.Alert\n status=\"info\"\n label={t('previewAlert.title', 'Pay Schedule Preview')}\n >\n <Components.Text>\n {t(\n 'previewAlert.description',\n 'Complete all the required fields on the left to see a preview of your pay schedule.',\n )}\n </Components.Text>\n </Components.Alert>\n </div>\n )}\n </Flex>\n </Grid>\n </div>\n )\n}\n"],"names":["Edit","Components","useComponentContext","t","useTranslation","payPeriodPreview","mode","payPreviewLoading","usePaySchedule","setValue","useFormContext","selectedPayPeriodIndex","setSelectedPayPeriodIndex","useState","frequency","useWatch","customTwicePerMonth","payPeriodPreviewRange","shouldShowDay1","shouldShowDay2","useEffect","jsx","style","jsxs","Grid","Flex","TextInputField","SelectField","RadioGroupField","DatePickerField","NumberInputField","period","index","formatDateNamedWeekdayShortPlusDate","value","numericValue"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Edit.js","sources":["../../../../../src/components/Company/PaySchedule/_parts/Edit.tsx"],"sourcesContent":["import { useFormContext, useWatch } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { useEffect, useState } from 'react'\nimport type { PayScheduleInputs } from '../usePaySchedule'\nimport { usePaySchedule } from '../usePaySchedule'\nimport style from './Edit.module.scss'\nimport {\n Flex,\n SelectField,\n RadioGroupField,\n Grid,\n TextInputField,\n NumberInputField,\n DatePickerField,\n} from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { formatDateNamedWeekdayShortPlusDate } from '@/helpers/dateFormatting'\n\nexport const Edit = () => {\n const Components = useComponentContext()\n const { t } = useTranslation('Company.PaySchedule')\n const { payPeriodPreview, mode, payPreviewLoading } = usePaySchedule()\n const { setValue } = useFormContext<PayScheduleInputs>()\n const [selectedPayPeriodIndex, setSelectedPayPeriodIndex] = useState<number>(0)\n\n const frequency = useWatch({ name: 'frequency' })\n const customTwicePerMonth = useWatch({ name: 'customTwicePerMonth' })\n const payPeriodPreviewRange = useWatch({ name: 'payPeriodPreviewRange' })\n\n const shouldShowDay1 =\n (frequency === 'Twice per month' && customTwicePerMonth === 'custom') || frequency === 'Monthly'\n const shouldShowDay2 = frequency === 'Twice per month' && customTwicePerMonth === 'custom'\n\n useEffect(() => {\n if (frequency === 'Twice per month' && customTwicePerMonth === '1st15th') {\n setValue('day1', 15)\n setValue('day2', 31)\n }\n }, [frequency, customTwicePerMonth, setValue])\n\n // This is a workaround to ensure that the pay period preview range is set when the selected pay period index changes\n // TODO: Once we have a RHF free select, that can be used and this effect can be removed\n useEffect(() => {\n if (payPeriodPreviewRange === undefined) {\n setValue('payPeriodPreviewRange', selectedPayPeriodIndex)\n }\n }, [selectedPayPeriodIndex, setValue, payPeriodPreviewRange])\n\n if (mode !== 'EDIT_PAY_SCHEDULE' && mode !== 'ADD_PAY_SCHEDULE') {\n return null\n }\n\n return (\n <div className={style.payScheduleContainer}>\n <Grid gap={32} gridTemplateColumns={{ base: '1fr', small: '1fr 1fr' }}>\n <div className={style.payScheduleForm}>\n <Flex flexDirection={'column'}>\n <TextInputField name=\"customName\" label=\"Name\" isRequired />\n <SelectField\n name=\"frequency\"\n label={t('labels.frequency')}\n options={[\n { value: 'Every week', label: t('frequencies.everyWeek') },\n { value: 'Every other week', label: t('frequencies.everyOtherWeek') },\n { value: 'Twice per month', label: t('frequencies.twicePerMonth') },\n { value: 'Monthly', label: t('frequencies.monthly') },\n ]}\n isRequired\n />\n {frequency === 'Twice per month' && (\n <RadioGroupField\n name=\"customTwicePerMonth\"\n label={t('labels.frequencyOptions')}\n description={t('descriptions.frequencyOptionsDescription')}\n options={[\n { value: '1st15th', label: t('frequencyOptions.15thAndLast') },\n { value: 'custom', label: t('frequencyOptions.custom') },\n ]}\n />\n )}\n <DatePickerField\n name=\"anchorPayDate\"\n label={t('labels.firstPayDate')}\n description={t('descriptions.anchorPayDateDescription')}\n isRequired\n />\n <DatePickerField\n name=\"anchorEndOfPayPeriod\"\n label={t('labels.firstPayPeriodEndDate')}\n description={t('descriptions.anchorEndOfPayPeriodDescription')}\n isRequired\n />\n <div className={shouldShowDay1 ? '' : style.visuallyHidden}>\n <NumberInputField name=\"day1\" label={t('labels.firstPayDayOfTheMonth')} isRequired />\n </div>\n <div className={shouldShowDay2 ? '' : style.visuallyHidden}>\n <NumberInputField name=\"day2\" label={t('labels.lastPayDayOfTheMonth')} isRequired />\n </div>\n </Flex>\n </div>\n <Flex flexDirection=\"column\" gap={4} justifyContent=\"center\" alignItems=\"center\">\n {payPeriodPreview && payPeriodPreview[selectedPayPeriodIndex] ? (\n <div className={style.calendarContainer}>\n {!payPreviewLoading && (\n <SelectField\n name=\"payPeriodPreviewRange\"\n label={t('labels.preview')}\n options={payPeriodPreview.map((period, index) => {\n return {\n value: String(index),\n label: `${formatDateNamedWeekdayShortPlusDate(period.startDate)} – ${formatDateNamedWeekdayShortPlusDate(period.endDate)}`,\n }\n })}\n defaultValue={String(selectedPayPeriodIndex)}\n onChange={(value: string) => {\n const numericValue = Number(value)\n if (!isNaN(numericValue)) {\n setSelectedPayPeriodIndex(numericValue)\n }\n }}\n />\n )}\n <Components.CalendarPreview\n key={selectedPayPeriodIndex}\n dateRange={{\n start: new Date(payPeriodPreview[selectedPayPeriodIndex].startDate as string),\n end: new Date(payPeriodPreview[selectedPayPeriodIndex].endDate as string),\n label: t('payPreview.payPeriod') || 'Pay Period',\n }}\n highlightDates={[\n {\n date: new Date(payPeriodPreview[selectedPayPeriodIndex].checkDate as string),\n highlightColor: 'primary',\n label: t('payPreview.payday') || 'Payday',\n },\n {\n date: new Date(payPeriodPreview[selectedPayPeriodIndex].runPayrollBy as string),\n highlightColor: 'secondary',\n label: t('payPreview.payrollDeadline') || 'Payroll Deadline',\n },\n ]}\n />\n </div>\n ) : (\n <div className={style.calendarContainer}>\n <Components.Alert\n status=\"info\"\n label={t('previewAlert.title', 'Pay Schedule Preview')}\n >\n <Components.Text>\n {t(\n 'previewAlert.description',\n 'Complete all the required fields on the left to see a preview of your pay schedule.',\n )}\n </Components.Text>\n </Components.Alert>\n </div>\n )}\n </Flex>\n </Grid>\n </div>\n )\n}\n"],"names":["Edit","Components","useComponentContext","t","useTranslation","payPeriodPreview","mode","payPreviewLoading","usePaySchedule","setValue","useFormContext","selectedPayPeriodIndex","setSelectedPayPeriodIndex","useState","frequency","useWatch","customTwicePerMonth","payPeriodPreviewRange","shouldShowDay1","shouldShowDay2","useEffect","jsx","style","jsxs","Grid","Flex","TextInputField","SelectField","RadioGroupField","DatePickerField","NumberInputField","period","index","formatDateNamedWeekdayShortPlusDate","value","numericValue"],"mappings":"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"}
|
|
@@ -2,8 +2,9 @@ import { jsx as e, jsxs as r, Fragment as o } from "react/jsx-runtime";
|
|
|
2
2
|
import { useTranslation as c, Trans as a } from "react-i18next";
|
|
3
3
|
import { usePaySchedule as d } from "../usePaySchedule.js";
|
|
4
4
|
import { Flex as h } from "../../../Common/Flex/Flex.js";
|
|
5
|
+
import "classnames";
|
|
5
6
|
import { useComponentContext as l } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
6
|
-
const
|
|
7
|
+
const D = () => {
|
|
7
8
|
const { t } = c("Company.PaySchedule"), n = l(), { mode: s } = d();
|
|
8
9
|
let i = /* @__PURE__ */ e(o, {});
|
|
9
10
|
switch (s) {
|
|
@@ -42,6 +43,6 @@ const y = () => {
|
|
|
42
43
|
return /* @__PURE__ */ e(h, { justifyContent: "space-between", flexDirection: "column", gap: 4, children: /* @__PURE__ */ e("header", { children: i }) });
|
|
43
44
|
};
|
|
44
45
|
export {
|
|
45
|
-
|
|
46
|
+
D as Head
|
|
46
47
|
};
|
|
47
48
|
//# sourceMappingURL=Head.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Head.js","sources":["../../../../../src/components/Company/PaySchedule/_parts/Head.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport { usePaySchedule } from '../usePaySchedule'\nimport { Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\n// Head slot for PaySchedule component\nexport const Head = () => {\n const { t } = useTranslation('Company.PaySchedule')\n const Components = useComponentContext()\n\n const { mode } = usePaySchedule()\n let headingOutput: React.ReactElement = <></>\n\n switch (mode) {\n case 'LIST_PAY_SCHEDULES':\n headingOutput = (\n <>\n <Components.Heading as=\"h2\">{t('headings.pageTitle')}</Components.Heading>\n <Components.Text>\n <Trans\n i18nKey={'listDescription'}\n t={t}\n components={{\n how_to_choose_schedule: <Components.Link />,\n }}\n />\n </Components.Text>\n <Components.Text>\n <Trans\n i18nKey={'listDescription2'}\n t={t}\n components={{\n payment_law_doc: <Components.Link />,\n }}\n />\n </Components.Text>\n </>\n )\n break\n case 'ADD_PAY_SCHEDULE':\n headingOutput = (\n <Components.Heading as=\"h2\">{t('headings.addPaySchedule')}</Components.Heading>\n )\n break\n case 'EDIT_PAY_SCHEDULE':\n headingOutput = (\n <Components.Heading as=\"h2\">{t('headings.editPaySchedule')}</Components.Heading>\n )\n break\n default:\n }\n\n return (\n <Flex justifyContent=\"space-between\" flexDirection={'column'} gap={4}>\n <header>{headingOutput}</header>\n </Flex>\n )\n}\n"],"names":["Head","useTranslation","Components","useComponentContext","mode","usePaySchedule","headingOutput","jsx","Fragment","jsxs","Trans","Flex"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Head.js","sources":["../../../../../src/components/Company/PaySchedule/_parts/Head.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport { usePaySchedule } from '../usePaySchedule'\nimport { Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\n// Head slot for PaySchedule component\nexport const Head = () => {\n const { t } = useTranslation('Company.PaySchedule')\n const Components = useComponentContext()\n\n const { mode } = usePaySchedule()\n let headingOutput: React.ReactElement = <></>\n\n switch (mode) {\n case 'LIST_PAY_SCHEDULES':\n headingOutput = (\n <>\n <Components.Heading as=\"h2\">{t('headings.pageTitle')}</Components.Heading>\n <Components.Text>\n <Trans\n i18nKey={'listDescription'}\n t={t}\n components={{\n how_to_choose_schedule: <Components.Link />,\n }}\n />\n </Components.Text>\n <Components.Text>\n <Trans\n i18nKey={'listDescription2'}\n t={t}\n components={{\n payment_law_doc: <Components.Link />,\n }}\n />\n </Components.Text>\n </>\n )\n break\n case 'ADD_PAY_SCHEDULE':\n headingOutput = (\n <Components.Heading as=\"h2\">{t('headings.addPaySchedule')}</Components.Heading>\n )\n break\n case 'EDIT_PAY_SCHEDULE':\n headingOutput = (\n <Components.Heading as=\"h2\">{t('headings.editPaySchedule')}</Components.Heading>\n )\n break\n default:\n }\n\n return (\n <Flex justifyContent=\"space-between\" flexDirection={'column'} gap={4}>\n <header>{headingOutput}</header>\n </Flex>\n )\n}\n"],"names":["Head","useTranslation","Components","useComponentContext","mode","usePaySchedule","headingOutput","jsx","Fragment","jsxs","Trans","Flex"],"mappings":";;;;;;AAMO,MAAMA,IAAO,MAAM;AACxB,QAAM,EAAE,EAAA,IAAMC,EAAe,qBAAqB,GAC5CC,IAAaC,EAAoB,GAEjC,EAAE,MAAAC,EAAK,IAAIC,EAAe;AAChC,MAAIC,IAAsC,gBAAAC,EAAAC,GAAA,EAAA;AAE1C,UAAQJ,GAAM;AAAA,IACZ,KAAK;AACH,MAAAE,IAEI,gBAAAG,EAAAD,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAD,EAACL,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAA,EAAE,oBAAoB,GAAE;AAAA,QACrD,gBAAAK,EAACL,EAAW,MAAX,EACC,UAAA,gBAAAK;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT;AAAA,YACA,YAAY;AAAA,cACV,wBAAwB,gBAAAH,EAACL,EAAW,MAAX,CAAgB,CAAA;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAK,EAACL,EAAW,MAAX,EACC,UAAA,gBAAAK;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT;AAAA,YACA,YAAY;AAAA,cACV,iBAAiB,gBAAAH,EAACL,EAAW,MAAX,CAAgB,CAAA;AAAA,YAAA;AAAA,UACpC;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA,GACF;AAEF;AAAA,IACF,KAAK;AAED,MAAAI,IAAA,gBAAAC,EAACL,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAA,EAAE,yBAAyB,GAAE;AAE5D;AAAA,IACF,KAAK;AAED,MAAAI,IAAA,gBAAAC,EAACL,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAA,EAAE,0BAA0B,GAAE;AAE7D;AAAA,EACF;AAIA,SAAA,gBAAAK,EAACI,GAAK,EAAA,gBAAe,iBAAgB,eAAe,UAAU,KAAK,GACjE,UAAA,gBAAAJ,EAAC,UAAQ,EAAA,UAAAD,EAAc,CAAA,GACzB;AAEJ;"}
|
|
@@ -3,15 +3,16 @@ import { useTranslation as h } from "react-i18next";
|
|
|
3
3
|
import { usePaySchedule as y } from "../usePaySchedule.js";
|
|
4
4
|
import o from "./List.module.scss.js";
|
|
5
5
|
import { Flex as s } from "../../../Common/Flex/Flex.js";
|
|
6
|
+
import "classnames";
|
|
6
7
|
import f from "../../../../assets/icons/pencil.svg.js";
|
|
7
8
|
import { useComponentContext as S } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
8
9
|
import { HamburgerMenu as v } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
|
|
9
10
|
import { VisuallyHidden as g } from "../../../Common/VisuallyHidden/VisuallyHidden.js";
|
|
10
11
|
import { useDataView as L } from "../../../Common/DataView/useDataView.js";
|
|
11
12
|
import { DataView as C } from "../../../Common/DataView/DataView.js";
|
|
12
|
-
const
|
|
13
|
-
const { t: n } = h("Company.PaySchedule"), r = S(), { paySchedules:
|
|
14
|
-
data:
|
|
13
|
+
const B = () => {
|
|
14
|
+
const { t: n } = h("Company.PaySchedule"), r = S(), { paySchedules: m, mode: c, handleEdit: l } = y(), { ...d } = L({
|
|
15
|
+
data: m || [],
|
|
15
16
|
columns: [
|
|
16
17
|
{
|
|
17
18
|
title: n("payScheduleList.name"),
|
|
@@ -49,9 +50,9 @@ const H = () => {
|
|
|
49
50
|
}
|
|
50
51
|
)
|
|
51
52
|
});
|
|
52
|
-
return
|
|
53
|
+
return c !== "LIST_PAY_SCHEDULES" ? null : /* @__PURE__ */ e(C, { label: "test", ...d });
|
|
53
54
|
};
|
|
54
55
|
export {
|
|
55
|
-
|
|
56
|
+
B as List
|
|
56
57
|
};
|
|
57
58
|
//# sourceMappingURL=List.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"List.js","sources":["../../../../../src/components/Company/PaySchedule/_parts/List.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { usePaySchedule } from '../usePaySchedule'\nimport styles from './List.module.scss'\nimport { useDataView, DataView, Flex, VisuallyHidden } from '@/components/Common'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\n\nexport const List = () => {\n const { t } = useTranslation('Company.PaySchedule')\n const Components = useComponentContext()\n const { paySchedules, mode, handleEdit } = usePaySchedule()\n\n const { ...dataViewProps } = useDataView({\n data: paySchedules || [],\n columns: [\n {\n title: t('payScheduleList.name'),\n key: 'customName',\n render: schedule => {\n const hasName = !!schedule.name\n let displayName = hasName ? schedule.name : schedule.customName\n if (displayName && displayName.length > 1) {\n displayName = displayName.charAt(0).toUpperCase() + displayName.slice(1)\n } else {\n displayName = schedule.customName\n }\n const displayFrequency = schedule.customName\n return (\n <Flex flexDirection={'column'} gap={0}>\n <div className={styles.content}>\n <div>{displayName}</div>\n {hasName && <div>{displayFrequency}</div>}\n </div>\n </Flex>\n )\n },\n },\n {\n title: <VisuallyHidden>{t('payScheduleList.active')}</VisuallyHidden>,\n key: 'active',\n render: schedule => (\n <Flex alignItems={'center'} justifyContent={'center'}>\n <div className={styles.content}>\n {schedule.active ? (\n <Components.Badge status=\"success\">{t('payScheduleList.active')}</Components.Badge>\n ) : (\n <Components.Badge status=\"info\">{t('payScheduleList.inactive')}</Components.Badge>\n )}\n </div>\n </Flex>\n ),\n },\n ],\n itemMenu: schedule => {\n return (\n <HamburgerMenu\n triggerLabel=\"Actions\"\n items={[\n {\n label: t('payScheduleList.edit'),\n onClick: () => {\n handleEdit(schedule)\n },\n icon: <PencilSvg aria-hidden />,\n },\n ]}\n />\n )\n },\n })\n\n if (mode !== 'LIST_PAY_SCHEDULES') {\n return null\n }\n\n return <DataView label=\"test\" {...dataViewProps} />\n}\n"],"names":["List","t","useTranslation","Components","useComponentContext","paySchedules","mode","handleEdit","usePaySchedule","dataViewProps","useDataView","schedule","hasName","displayName","displayFrequency","jsx","Flex","jsxs","styles","VisuallyHidden","HamburgerMenu","PencilSvg","DataView"],"mappings":"
|
|
1
|
+
{"version":3,"file":"List.js","sources":["../../../../../src/components/Company/PaySchedule/_parts/List.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { usePaySchedule } from '../usePaySchedule'\nimport styles from './List.module.scss'\nimport { useDataView, DataView, Flex, VisuallyHidden } from '@/components/Common'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\n\nexport const List = () => {\n const { t } = useTranslation('Company.PaySchedule')\n const Components = useComponentContext()\n const { paySchedules, mode, handleEdit } = usePaySchedule()\n\n const { ...dataViewProps } = useDataView({\n data: paySchedules || [],\n columns: [\n {\n title: t('payScheduleList.name'),\n key: 'customName',\n render: schedule => {\n const hasName = !!schedule.name\n let displayName = hasName ? schedule.name : schedule.customName\n if (displayName && displayName.length > 1) {\n displayName = displayName.charAt(0).toUpperCase() + displayName.slice(1)\n } else {\n displayName = schedule.customName\n }\n const displayFrequency = schedule.customName\n return (\n <Flex flexDirection={'column'} gap={0}>\n <div className={styles.content}>\n <div>{displayName}</div>\n {hasName && <div>{displayFrequency}</div>}\n </div>\n </Flex>\n )\n },\n },\n {\n title: <VisuallyHidden>{t('payScheduleList.active')}</VisuallyHidden>,\n key: 'active',\n render: schedule => (\n <Flex alignItems={'center'} justifyContent={'center'}>\n <div className={styles.content}>\n {schedule.active ? (\n <Components.Badge status=\"success\">{t('payScheduleList.active')}</Components.Badge>\n ) : (\n <Components.Badge status=\"info\">{t('payScheduleList.inactive')}</Components.Badge>\n )}\n </div>\n </Flex>\n ),\n },\n ],\n itemMenu: schedule => {\n return (\n <HamburgerMenu\n triggerLabel=\"Actions\"\n items={[\n {\n label: t('payScheduleList.edit'),\n onClick: () => {\n handleEdit(schedule)\n },\n icon: <PencilSvg aria-hidden />,\n },\n ]}\n />\n )\n },\n })\n\n if (mode !== 'LIST_PAY_SCHEDULES') {\n return null\n }\n\n return <DataView label=\"test\" {...dataViewProps} />\n}\n"],"names":["List","t","useTranslation","Components","useComponentContext","paySchedules","mode","handleEdit","usePaySchedule","dataViewProps","useDataView","schedule","hasName","displayName","displayFrequency","jsx","Flex","jsxs","styles","VisuallyHidden","HamburgerMenu","PencilSvg","DataView"],"mappings":";;;;;;;;;;;;AAQO,MAAMA,IAAO,MAAM;AACxB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,qBAAqB,GAC5CC,IAAaC,EAAoB,GACjC,EAAE,cAAAC,GAAc,MAAAC,GAAM,YAAAC,EAAA,IAAeC,EAAe,GAEpD,EAAE,GAAGC,EAAc,IAAIC,EAAY;AAAA,IACvC,MAAML,KAAgB,CAAC;AAAA,IACvB,SAAS;AAAA,MACP;AAAA,QACE,OAAOJ,EAAE,sBAAsB;AAAA,QAC/B,KAAK;AAAA,QACL,QAAQ,CAAYU,MAAA;AACZ,gBAAAC,IAAU,CAAC,CAACD,EAAS;AAC3B,cAAIE,IAAcD,IAAUD,EAAS,OAAOA,EAAS;AACjD,UAAAE,KAAeA,EAAY,SAAS,IACxBA,IAAAA,EAAY,OAAO,CAAC,EAAE,gBAAgBA,EAAY,MAAM,CAAC,IAEvEA,IAAcF,EAAS;AAEzB,gBAAMG,IAAmBH,EAAS;AAEhC,iBAAA,gBAAAI,EAACC,GAAK,EAAA,eAAe,UAAU,KAAK,GAClC,UAAC,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,SACrB,UAAA;AAAA,YAAA,gBAAAH,EAAC,SAAK,UAAYF,EAAA,CAAA;AAAA,YACjBD,KAAY,gBAAAG,EAAA,OAAA,EAAK,UAAiBD,EAAA,CAAA;AAAA,UAAA,EAAA,CACrC,EACF,CAAA;AAAA,QAAA;AAAA,MAGN;AAAA,MACA;AAAA,QACE,OAAO,gBAAAC,EAACI,GAAgB,EAAA,UAAAlB,EAAE,wBAAwB,GAAE;AAAA,QACpD,KAAK;AAAA,QACL,QAAQ,CAAAU,MACL,gBAAAI,EAAAC,GAAA,EAAK,YAAY,UAAU,gBAAgB,UAC1C,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAO,SACpB,UAAAP,EAAS,SACP,gBAAAI,EAAAZ,EAAW,OAAX,EAAiB,QAAO,WAAW,UAAAF,EAAE,wBAAwB,EAAE,CAAA,IAE/D,gBAAAc,EAAAZ,EAAW,OAAX,EAAiB,QAAO,QAAQ,UAAAF,EAAE,0BAA0B,GAAE,GAEnE,EACF,CAAA;AAAA,MAAA;AAAA,IAGN;AAAA,IACA,UAAU,CAAYU,MAElB,gBAAAI;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,cAAa;AAAA,QACb,OAAO;AAAA,UACL;AAAA,YACE,OAAOnB,EAAE,sBAAsB;AAAA,YAC/B,SAAS,MAAM;AACb,cAAAM,EAAWI,CAAQ;AAAA,YACrB;AAAA,YACA,MAAM,gBAAAI,EAACM,GAAU,EAAA,eAAW,GAAC,CAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACF;AAAA,IACF;AAAA,EAEJ,CACD;AAED,SAAIf,MAAS,uBACJ,OAGD,gBAAAS,EAAAO,GAAA,EAAS,OAAM,QAAQ,GAAGb,GAAe;AACnD;"}
|
|
@@ -9,9 +9,9 @@ import "@gusto/embedded-api/models/errors/unprocessableentityerrorobject";
|
|
|
9
9
|
import "@tanstack/react-query";
|
|
10
10
|
import "../../Base/useBase.js";
|
|
11
11
|
import "../../../shared/constants.js";
|
|
12
|
+
import "classnames";
|
|
12
13
|
import "dompurify";
|
|
13
14
|
import "../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
14
|
-
import "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
|
|
15
15
|
import { createCompoundContext as e } from "../../Base/createCompoundContext.js";
|
|
16
16
|
const w = o.object({
|
|
17
17
|
frequency: o.enum(["Every week", "Every other week", "Twice per month", "Monthly"]),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as i, jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import { useTranslation as a } from "react-i18next";
|
|
3
3
|
import { useStateTaxesForm as s } from "./context.js";
|
|
4
|
-
import "
|
|
4
|
+
import "classnames";
|
|
5
5
|
import { ActionsLayout as m } from "../../../Common/ActionsLayout/ActionsLayout.js";
|
|
6
6
|
import { useComponentContext as c } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
7
7
|
function x() {
|
|
@@ -1,100 +1,106 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as a, jsxs as D, Fragment as H } from "react/jsx-runtime";
|
|
2
2
|
import { useForm as K, FormProvider as M } from "react-hook-form";
|
|
3
3
|
import { zodResolver as w } from "@hookform/resolvers/zod";
|
|
4
4
|
import { useTaxRequirementsUpdateStateMutation as z } from "@gusto/embedded-api/react-query/taxRequirementsUpdateState";
|
|
5
5
|
import { useTaxRequirementsGetSuspense as G } from "@gusto/embedded-api/react-query/taxRequirementsGet";
|
|
6
|
-
import { z as
|
|
6
|
+
import { z as r } from "zod";
|
|
7
7
|
import { useMemo as L } from "react";
|
|
8
8
|
import { useTranslation as X } from "react-i18next";
|
|
9
|
-
import { Head as
|
|
9
|
+
import { Head as k } from "./Head.js";
|
|
10
10
|
import { StateTaxesFormProvider as Y } from "./context.js";
|
|
11
|
-
import { Form as
|
|
12
|
-
import { Actions as
|
|
11
|
+
import { Form as A } from "./Form.js";
|
|
12
|
+
import { Actions as P } from "./Actions.js";
|
|
13
13
|
import { BaseComponent as $ } from "../../../Base/Base.js";
|
|
14
14
|
import { useI18n as I } from "../../../../i18n/I18n.js";
|
|
15
15
|
import { Flex as J } from "../../../Common/Flex/Flex.js";
|
|
16
16
|
import { Form as Q } from "../../../Common/Form/Form.js";
|
|
17
|
-
import { componentEvents as
|
|
17
|
+
import { componentEvents as q } from "../../../../shared/constants.js";
|
|
18
18
|
import { useBase as W } from "../../../Base/useBase.js";
|
|
19
|
-
function
|
|
20
|
-
return /* @__PURE__ */
|
|
19
|
+
function h(i) {
|
|
20
|
+
return /* @__PURE__ */ a($, { ...i, children: /* @__PURE__ */ a(Z, { ...i, children: i.children }) });
|
|
21
21
|
}
|
|
22
|
-
function Z({ companyId:
|
|
22
|
+
function Z({ companyId: i, state: y, className: _, children: x }) {
|
|
23
23
|
I("Company.StateTaxes");
|
|
24
|
-
const { onEvent: F, baseSubmitHandler:
|
|
25
|
-
const
|
|
26
|
-
return
|
|
27
|
-
if (!
|
|
28
|
-
const m =
|
|
29
|
-
|
|
30
|
-
if (!
|
|
31
|
-
const g =
|
|
32
|
-
p[g] =
|
|
33
|
-
let
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
24
|
+
const { onEvent: F, baseSubmitHandler: j } = W(), { t: o } = X("Company.StateTaxes", { keyPrefix: "form" }), { data: C } = G({ companyUuid: i, state: y }), l = C.taxRequirementsState, { mutateAsync: E, isPending: N } = z(), { dynamicSchema: R, defaultValues: V } = L(() => {
|
|
25
|
+
const f = {}, s = {};
|
|
26
|
+
return l.requirementSets?.forEach((t) => {
|
|
27
|
+
if (!t.key) return;
|
|
28
|
+
const m = t.key, c = {}, p = {};
|
|
29
|
+
t.requirements?.forEach((e) => {
|
|
30
|
+
if (!e.key) return;
|
|
31
|
+
const g = e.key;
|
|
32
|
+
p[g] = e.metadata?.type === "radio" ? e.value ?? void 0 : e.value ? String(e.value) : "";
|
|
33
|
+
let v = r.string({
|
|
34
|
+
required_error: o("validations.required")
|
|
35
|
+
}).min(1, o("validations.required"));
|
|
36
|
+
const d = e.metadata?.validation;
|
|
37
|
+
if (d && e.metadata?.type === "tax_rate")
|
|
38
|
+
if (d.type === "min_max") {
|
|
39
|
+
const n = parseFloat(d.min), u = parseFloat(d.max);
|
|
40
|
+
!isNaN(n) && !isNaN(u) && (v = r.preprocess(
|
|
41
|
+
(S) => Number(S),
|
|
42
|
+
r.number().min(n, o("validations.minValue", { min: n })).max(u, o("validations.maxValue", { max: u })).transform((S) => String(S))
|
|
41
43
|
));
|
|
42
44
|
} else {
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
const n = d.rates;
|
|
46
|
+
v = r.string({
|
|
47
|
+
required_error: o("validations.required")
|
|
48
|
+
}).min(1, o("validations.required")).refine((u) => n.includes(u), {
|
|
49
|
+
message: o("validations.oneOf", { values: n.join(", ") })
|
|
46
50
|
});
|
|
47
51
|
}
|
|
48
|
-
|
|
49
|
-
|
|
52
|
+
e.metadata?.type === "radio" && (v = r.boolean({
|
|
53
|
+
required_error: o("validations.required")
|
|
54
|
+
})), c[g] = v;
|
|
55
|
+
}), Object.keys(c).length > 0 && (f[m] = r.object(c), s[m] = p);
|
|
50
56
|
}), {
|
|
51
|
-
dynamicSchema:
|
|
52
|
-
defaultValues:
|
|
57
|
+
dynamicSchema: r.object(f),
|
|
58
|
+
defaultValues: s
|
|
53
59
|
};
|
|
54
|
-
}, [
|
|
55
|
-
resolver: w(
|
|
56
|
-
defaultValues:
|
|
57
|
-
}),
|
|
58
|
-
await
|
|
59
|
-
const b =
|
|
60
|
-
const m =
|
|
60
|
+
}, [l, o]), { control: O, ...T } = K({
|
|
61
|
+
resolver: w(R),
|
|
62
|
+
defaultValues: V
|
|
63
|
+
}), U = async (f) => {
|
|
64
|
+
await j(f, async (s) => {
|
|
65
|
+
const b = l.requirementSets?.filter((t) => t.key && s[t.key]).map((t) => {
|
|
66
|
+
const m = t.key, c = s[m];
|
|
61
67
|
return {
|
|
62
|
-
state:
|
|
68
|
+
state: t.state,
|
|
63
69
|
key: m,
|
|
64
|
-
effectiveFrom:
|
|
65
|
-
requirements: Object.entries(
|
|
70
|
+
effectiveFrom: t.effectiveFrom,
|
|
71
|
+
requirements: Object.entries(c).map(([p, e]) => ({
|
|
66
72
|
key: p,
|
|
67
|
-
value: String(
|
|
73
|
+
value: String(e)
|
|
68
74
|
}))
|
|
69
75
|
};
|
|
70
76
|
});
|
|
71
|
-
await
|
|
77
|
+
await E({
|
|
72
78
|
request: {
|
|
73
|
-
companyUuid:
|
|
79
|
+
companyUuid: i,
|
|
74
80
|
requestBody: { requirementSets: b },
|
|
75
|
-
state:
|
|
81
|
+
state: y
|
|
76
82
|
}
|
|
77
|
-
}), F(
|
|
83
|
+
}), F(q.COMPANY_STATE_TAX_UPDATED);
|
|
78
84
|
});
|
|
79
85
|
}, B = () => {
|
|
80
|
-
F(
|
|
86
|
+
F(q.CANCEL);
|
|
81
87
|
};
|
|
82
|
-
return /* @__PURE__ */
|
|
88
|
+
return /* @__PURE__ */ a("section", { className: _, children: /* @__PURE__ */ a(M, { ...T, control: O, children: /* @__PURE__ */ a(Q, { onSubmit: T.handleSubmit(U), children: /* @__PURE__ */ a(
|
|
83
89
|
Y,
|
|
84
90
|
{
|
|
85
|
-
value: { stateTaxRequirements:
|
|
86
|
-
children: /* @__PURE__ */
|
|
87
|
-
/* @__PURE__ */
|
|
88
|
-
/* @__PURE__ */
|
|
89
|
-
/* @__PURE__ */
|
|
91
|
+
value: { stateTaxRequirements: l, isPending: N, state: y, handleCancel: B },
|
|
92
|
+
children: /* @__PURE__ */ a(J, { flexDirection: "column", gap: 32, children: x || /* @__PURE__ */ D(H, { children: [
|
|
93
|
+
/* @__PURE__ */ a(k, {}),
|
|
94
|
+
/* @__PURE__ */ a(A, {}),
|
|
95
|
+
/* @__PURE__ */ a(P, {})
|
|
90
96
|
] }) })
|
|
91
97
|
}
|
|
92
98
|
) }) }) });
|
|
93
99
|
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
100
|
+
h.Head = k;
|
|
101
|
+
h.Form = A;
|
|
102
|
+
h.Actions = P;
|
|
97
103
|
export {
|
|
98
|
-
|
|
104
|
+
h as StateTaxesForm
|
|
99
105
|
};
|
|
100
106
|
//# sourceMappingURL=StateTaxesForm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StateTaxesForm.js","sources":["../../../../../src/components/Company/StateTaxes/StateTaxesForm/StateTaxesForm.tsx"],"sourcesContent":["import { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useTaxRequirementsUpdateStateMutation } from '@gusto/embedded-api/react-query/taxRequirementsUpdateState'\nimport { useTaxRequirementsGetSuspense } from '@gusto/embedded-api/react-query/taxRequirementsGet'\nimport { z } from 'zod'\nimport { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Head } from './Head'\nimport { StateTaxesFormProvider } from './context'\nimport { Form } from './Form'\nimport { Actions } from './Actions'\nimport type { BaseComponentInterface, CommonComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\nimport { useI18n } from '@/i18n/I18n'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { Form as HtmlForm } from '@/components/Common/Form'\nimport { componentEvents } from '@/shared/constants'\nimport { useBase } from '@/components/Base'\n\ninterface StateTaxesFormProps extends CommonComponentInterface {\n companyId: string\n state: string\n}\n\nexport function StateTaxesForm(props: StateTaxesFormProps & BaseComponentInterface) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nfunction Root({ companyId, state, className, children }: StateTaxesFormProps) {\n useI18n('Company.StateTaxes')\n const { onEvent, baseSubmitHandler } = useBase()\n const { t } = useTranslation('Company.StateTaxes', { keyPrefix: 'form' })\n const { data } = useTaxRequirementsGetSuspense({ companyUuid: companyId, state })\n const stateTaxRequirements = data.taxRequirementsState!\n\n const { mutateAsync: updateStateTax, isPending: isPendingUpdate } =\n useTaxRequirementsUpdateStateMutation()\n\n // Schema and default value generation\n const { dynamicSchema, defaultValues } = useMemo(() => {\n const schemaShape: Record<string, z.ZodObject<Record<string, z.ZodTypeAny>>> = {}\n const values: Partial<Record<string, Record<string, string | boolean>>> = {}\n\n //Looping through each requirement set\n stateTaxRequirements.requirementSets?.forEach(requirementSet => {\n if (!requirementSet.key) return\n\n const requirementSetKey = requirementSet.key\n const requirementShape: Record<string, z.ZodTypeAny> = {}\n const requirementValues: Record<string, string | boolean> = {}\n\n requirementSet.requirements?.forEach(requirement => {\n if (!requirement.key) return\n\n const requirementKey = requirement.key\n\n // --- Default Value Logic ---\n requirementValues[requirementKey] = requirement.value ?? ''\n\n // --- Schema Logic ---\n // Start with a basic string schema\n let fieldSchema: z.ZodTypeAny = z.string().min(1)\n\n const validation = requirement.metadata?.validation\n // Not all requirements have validation\n if (validation) {\n if (requirement.metadata?.type === 'tax_rate') {\n if (validation.type === 'min_max') {\n const min = parseFloat(validation.min as string)\n const max = parseFloat(validation.max as string)\n\n if (!isNaN(min) && !isNaN(max)) {\n fieldSchema = z.preprocess(\n val => Number(val),\n z\n .number()\n .min(min, t('validations.minValue', { min }))\n .max(max, t('validations.maxValue', { max }))\n .transform(num => String(num)),\n )\n }\n } else {\n //Type is one_of\n const oneOfValues = validation.rates as string[]\n fieldSchema = z\n .string()\n .min(1)\n .refine(val => oneOfValues.includes(val), {\n message: t('validations.oneOf', { values: oneOfValues.join(', ') }),\n })\n }\n }\n }\n if (requirement.metadata?.type === 'radio') {\n fieldSchema = z.boolean()\n }\n requirementShape[requirementKey] = fieldSchema\n // --- End Schema Logic ---\n })\n\n if (Object.keys(requirementShape).length > 0) {\n schemaShape[requirementSetKey] = z.object(requirementShape)\n values[requirementSetKey] = requirementValues\n }\n })\n\n const finalSchema = z.object(schemaShape)\n\n // Return both the schema and the default values\n return {\n dynamicSchema: finalSchema,\n defaultValues: values as z.infer<typeof finalSchema>,\n }\n }, [stateTaxRequirements, t])\n\n // Infer the type from the schema\n type InferredFormInputs = z.infer<typeof dynamicSchema>\n\n const { control, ...methods } = useForm<InferredFormInputs>({\n resolver: zodResolver(dynamicSchema),\n defaultValues,\n })\n\n const onSubmit = async (formData: InferredFormInputs) => {\n await baseSubmitHandler(formData, async payload => {\n const requirementSets = stateTaxRequirements.requirementSets\n ?.filter(rs => rs.key && payload[rs.key])\n .map(requirementSet => {\n const requirementSetKey = requirementSet.key as string\n const payloadSet = payload[requirementSetKey] as Record<string, unknown>\n return {\n state: requirementSet.state,\n key: requirementSetKey,\n effectiveFrom: requirementSet.effectiveFrom,\n requirements: Object.entries(payloadSet).map(([key, value]) => ({\n key,\n value: String(value),\n })),\n }\n })\n await updateStateTax({\n request: {\n companyUuid: companyId,\n requestBody: { requirementSets },\n state,\n },\n })\n onEvent(componentEvents.COMPANY_STATE_TAX_UPDATED)\n })\n }\n\n const handleCancel = () => {\n onEvent(componentEvents.CANCEL)\n }\n\n return (\n <section className={className}>\n <FormProvider {...methods} control={control}>\n <HtmlForm onSubmit={methods.handleSubmit(onSubmit)}>\n <StateTaxesFormProvider\n value={{ stateTaxRequirements, isPending: isPendingUpdate, state, handleCancel }}\n >\n <Flex flexDirection=\"column\" gap={32}>\n {children ? (\n children\n ) : (\n <>\n <Head />\n <Form />\n <Actions />\n </>\n )}\n </Flex>\n </StateTaxesFormProvider>\n </HtmlForm>\n </FormProvider>\n </section>\n )\n}\n\nStateTaxesForm.Head = Head\nStateTaxesForm.Form = Form\nStateTaxesForm.Actions = Actions\n"],"names":["StateTaxesForm","props","jsx","BaseComponent","Root","companyId","state","className","children","useI18n","onEvent","baseSubmitHandler","useBase","t","useTranslation","data","useTaxRequirementsGetSuspense","stateTaxRequirements","updateStateTax","isPendingUpdate","useTaxRequirementsUpdateStateMutation","dynamicSchema","defaultValues","useMemo","schemaShape","values","requirementSet","requirementSetKey","requirementShape","requirementValues","requirement","requirementKey","fieldSchema","z","validation","min","max","val","num","oneOfValues","control","methods","useForm","zodResolver","onSubmit","formData","payload","requirementSets","rs","payloadSet","key","value","componentEvents","handleCancel","FormProvider","HtmlForm","StateTaxesFormProvider","Flex","jsxs","Fragment","Head","Form","Actions"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"StateTaxesForm.js","sources":["../../../../../src/components/Company/StateTaxes/StateTaxesForm/StateTaxesForm.tsx"],"sourcesContent":["import { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useTaxRequirementsUpdateStateMutation } from '@gusto/embedded-api/react-query/taxRequirementsUpdateState'\nimport { useTaxRequirementsGetSuspense } from '@gusto/embedded-api/react-query/taxRequirementsGet'\nimport { z } from 'zod'\nimport { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Head } from './Head'\nimport { StateTaxesFormProvider } from './context'\nimport { Form } from './Form'\nimport { Actions } from './Actions'\nimport type { BaseComponentInterface, CommonComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\nimport { useI18n } from '@/i18n/I18n'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { Form as HtmlForm } from '@/components/Common/Form'\nimport { componentEvents } from '@/shared/constants'\nimport { useBase } from '@/components/Base'\n\ninterface StateTaxesFormProps extends CommonComponentInterface {\n companyId: string\n state: string\n}\n\nexport function StateTaxesForm(props: StateTaxesFormProps & BaseComponentInterface) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nfunction Root({ companyId, state, className, children }: StateTaxesFormProps) {\n useI18n('Company.StateTaxes')\n const { onEvent, baseSubmitHandler } = useBase()\n const { t } = useTranslation('Company.StateTaxes', { keyPrefix: 'form' })\n const { data } = useTaxRequirementsGetSuspense({ companyUuid: companyId, state })\n const stateTaxRequirements = data.taxRequirementsState!\n\n const { mutateAsync: updateStateTax, isPending: isPendingUpdate } =\n useTaxRequirementsUpdateStateMutation()\n\n // Schema and default value generation\n const { dynamicSchema, defaultValues } = useMemo(() => {\n const schemaShape: Record<string, z.ZodObject<Record<string, z.ZodTypeAny>>> = {}\n const values: Partial<Record<string, Record<string, string | boolean | number | undefined>>> =\n {}\n\n //Looping through each requirement set\n stateTaxRequirements.requirementSets?.forEach(requirementSet => {\n if (!requirementSet.key) return\n\n const requirementSetKey = requirementSet.key\n const requirementShape: Record<string, z.ZodTypeAny> = {}\n const requirementValues: Record<string, string | boolean | number | undefined> = {}\n\n requirementSet.requirements?.forEach(requirement => {\n if (!requirement.key) return\n\n const requirementKey = requirement.key\n\n // --- Default Value Logic ---\n requirementValues[requirementKey] =\n requirement.metadata?.type === 'radio'\n ? (requirement.value ?? undefined)\n : requirement.value\n ? String(requirement.value)\n : ''\n\n // --- Schema Logic ---\n // Start with a basic string schema\n let fieldSchema: z.ZodTypeAny = z\n .string({\n required_error: t('validations.required'),\n })\n .min(1, t('validations.required'))\n\n const validation = requirement.metadata?.validation\n // Not all requirements have validation\n if (validation) {\n if (requirement.metadata?.type === 'tax_rate') {\n if (validation.type === 'min_max') {\n const min = parseFloat(validation.min as string)\n const max = parseFloat(validation.max as string)\n\n if (!isNaN(min) && !isNaN(max)) {\n fieldSchema = z.preprocess(\n val => Number(val),\n z\n .number()\n .min(min, t('validations.minValue', { min }))\n .max(max, t('validations.maxValue', { max }))\n .transform(num => String(num)),\n )\n }\n } else {\n //Type is one_of\n const oneOfValues = validation.rates as string[]\n fieldSchema = z\n .string({\n required_error: t('validations.required'),\n })\n .min(1, t('validations.required'))\n .refine(val => oneOfValues.includes(val), {\n message: t('validations.oneOf', { values: oneOfValues.join(', ') }),\n })\n }\n }\n }\n if (requirement.metadata?.type === 'radio') {\n fieldSchema = z.boolean({\n required_error: t('validations.required'),\n })\n }\n requirementShape[requirementKey] = fieldSchema\n // --- End Schema Logic ---\n })\n\n if (Object.keys(requirementShape).length > 0) {\n schemaShape[requirementSetKey] = z.object(requirementShape)\n values[requirementSetKey] = requirementValues\n }\n })\n\n const finalSchema = z.object(schemaShape)\n\n // Return both the schema and the default values\n return {\n dynamicSchema: finalSchema,\n defaultValues: values as z.infer<typeof finalSchema>,\n }\n }, [stateTaxRequirements, t])\n\n // Infer the type from the schema\n type InferredFormInputs = z.infer<typeof dynamicSchema>\n\n const { control, ...methods } = useForm<InferredFormInputs>({\n resolver: zodResolver(dynamicSchema),\n defaultValues,\n })\n\n const onSubmit = async (formData: InferredFormInputs) => {\n await baseSubmitHandler(formData, async payload => {\n const requirementSets = stateTaxRequirements.requirementSets\n ?.filter(rs => rs.key && payload[rs.key])\n .map(requirementSet => {\n const requirementSetKey = requirementSet.key as string\n const payloadSet = payload[requirementSetKey] as Record<string, unknown>\n return {\n state: requirementSet.state,\n key: requirementSetKey,\n effectiveFrom: requirementSet.effectiveFrom,\n requirements: Object.entries(payloadSet).map(([key, value]) => ({\n key,\n value: String(value),\n })),\n }\n })\n await updateStateTax({\n request: {\n companyUuid: companyId,\n requestBody: { requirementSets },\n state,\n },\n })\n onEvent(componentEvents.COMPANY_STATE_TAX_UPDATED)\n })\n }\n\n const handleCancel = () => {\n onEvent(componentEvents.CANCEL)\n }\n\n return (\n <section className={className}>\n <FormProvider {...methods} control={control}>\n <HtmlForm onSubmit={methods.handleSubmit(onSubmit)}>\n <StateTaxesFormProvider\n value={{ stateTaxRequirements, isPending: isPendingUpdate, state, handleCancel }}\n >\n <Flex flexDirection=\"column\" gap={32}>\n {children ? (\n children\n ) : (\n <>\n <Head />\n <Form />\n <Actions />\n </>\n )}\n </Flex>\n </StateTaxesFormProvider>\n </HtmlForm>\n </FormProvider>\n </section>\n )\n}\n\nStateTaxesForm.Head = Head\nStateTaxesForm.Form = Form\nStateTaxesForm.Actions = Actions\n"],"names":["StateTaxesForm","props","jsx","BaseComponent","Root","companyId","state","className","children","useI18n","onEvent","baseSubmitHandler","useBase","t","useTranslation","data","useTaxRequirementsGetSuspense","stateTaxRequirements","updateStateTax","isPendingUpdate","useTaxRequirementsUpdateStateMutation","dynamicSchema","defaultValues","useMemo","schemaShape","values","requirementSet","requirementSetKey","requirementShape","requirementValues","requirement","requirementKey","fieldSchema","z","validation","min","max","val","num","oneOfValues","control","methods","useForm","zodResolver","onSubmit","formData","payload","requirementSets","rs","payloadSet","key","value","componentEvents","handleCancel","FormProvider","HtmlForm","StateTaxesFormProvider","Flex","jsxs","Fragment","Head","Form","Actions"],"mappings":"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"}
|
|
@@ -8,9 +8,9 @@ import "@gusto/embedded-api/models/errors/unprocessableentityerrorobject";
|
|
|
8
8
|
import "@tanstack/react-query";
|
|
9
9
|
import "../../../Base/useBase.js";
|
|
10
10
|
import "../../../../shared/constants.js";
|
|
11
|
+
import "classnames";
|
|
11
12
|
import "dompurify";
|
|
12
13
|
import "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
13
|
-
import "../../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
|
|
14
14
|
import { createCompoundContext as t } from "../../../Base/createCompoundContext.js";
|
|
15
15
|
const [c, d] = t("StateTaxesFormContext");
|
|
16
16
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { useTranslation as i } from "react-i18next";
|
|
3
3
|
import { useStateTaxesList as e } from "./context.js";
|
|
4
|
-
import "
|
|
4
|
+
import "classnames";
|
|
5
5
|
import { ActionsLayout as m } from "../../../Common/ActionsLayout/ActionsLayout.js";
|
|
6
6
|
import { useComponentContext as s } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
7
7
|
function l() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as s, Fragment as p } from "react/jsx-runtime";
|
|
2
2
|
import { useTranslation as o } from "react-i18next";
|
|
3
3
|
import { useStateTaxesList as l } from "./context.js";
|
|
4
|
-
import "
|
|
4
|
+
import "classnames";
|
|
5
5
|
import { EmptyData as c } from "../../../Common/EmptyData/EmptyData.js";
|
|
6
6
|
import { useComponentContext as u } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
7
7
|
import { useDataView as d } from "../../../Common/DataView/useDataView.js";
|
|
@@ -8,9 +8,9 @@ import "@gusto/embedded-api/models/errors/unprocessableentityerrorobject";
|
|
|
8
8
|
import "@tanstack/react-query";
|
|
9
9
|
import "../../../Base/useBase.js";
|
|
10
10
|
import "../../../../shared/constants.js";
|
|
11
|
+
import "classnames";
|
|
11
12
|
import "dompurify";
|
|
12
13
|
import "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
13
|
-
import "../../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
|
|
14
14
|
import { createCompoundContext as t } from "../../../Base/createCompoundContext.js";
|
|
15
15
|
const [c, d] = t("StateTaxesListContext");
|
|
16
16
|
export {
|
|
@@ -11,6 +11,8 @@ import { Actions as f } from "./Actions.js";
|
|
|
11
11
|
import { Form as N } from "../../Common/Form/Form.js";
|
|
12
12
|
import { useComponentDictionary as j, useI18n as q } from "../../../i18n/I18n.js";
|
|
13
13
|
import { Flex as w } from "../../Common/Flex/Flex.js";
|
|
14
|
+
import "react-i18next";
|
|
15
|
+
import "classnames";
|
|
14
16
|
import { BaseComponent as G } from "../../Base/Base.js";
|
|
15
17
|
import { useBase as M } from "../../Base/useBase.js";
|
|
16
18
|
import { contractorEvents as a } from "../../../shared/constants.js";
|