@gusto/embedded-react-sdk 0.23.0-rc.1 → 0.23.0-rc.2
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/dist/components/Common/SignatureForm/SignatureFormActions.js +1 -1
- package/dist/components/Common/SignatureForm/SignatureFormFields.js +1 -1
- package/dist/components/Company/AssignSignatory/CreateSignatory/CreateSignatoryForm.js +6 -5
- package/dist/components/Company/AssignSignatory/CreateSignatory/CreateSignatoryForm.js.map +1 -1
- package/dist/components/Company/AssignSignatory/InviteSignatory/InviteSignatoryForm.js +5 -4
- package/dist/components/Company/AssignSignatory/InviteSignatory/InviteSignatoryForm.js.map +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/PaySchedule/_parts/Edit.js +10 -9
- package/dist/components/Company/PaySchedule/_parts/Edit.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/Payments/CreatePayment/EditContractorPaymentPresentation.js +14 -13
- package/dist/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.js.map +1 -1
- package/dist/components/Employee/Deductions/IncludeDeductions/IncludeDeductions.js +3 -2
- package/dist/components/Employee/Deductions/IncludeDeductions/IncludeDeductions.js.map +1 -1
- package/dist/components/Employee/Profile/HomeAddress.js +9 -8
- package/dist/components/Employee/Profile/HomeAddress.js.map +1 -1
- package/dist/components/Employee/Profile/PersonalDetailsInputs.js +9 -8
- package/dist/components/Employee/Profile/PersonalDetailsInputs.js.map +1 -1
- package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.js +17 -16
- package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.js.map +1 -1
- package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js +36 -35
- package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs as m, jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import "../../../shared/constants.js";
|
|
3
3
|
import "classnames";
|
|
4
|
-
import { ActionsLayout as p } from "../ActionsLayout/ActionsLayout.js";
|
|
5
4
|
import "react-i18next";
|
|
5
|
+
import { ActionsLayout as p } from "../ActionsLayout/ActionsLayout.js";
|
|
6
6
|
import { useComponentContext as s } from "../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
7
7
|
import "react";
|
|
8
8
|
function y({
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs as n, Fragment as s, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import "../../../shared/constants.js";
|
|
3
3
|
import "classnames";
|
|
4
|
-
import { TextInputField as p } from "../Fields/TextInputField/TextInputField.js";
|
|
5
4
|
import "react-i18next";
|
|
5
|
+
import { TextInputField as p } from "../Fields/TextInputField/TextInputField.js";
|
|
6
6
|
import "../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
7
7
|
import "react";
|
|
8
8
|
import { CheckboxField as a } from "../Fields/CheckboxField/CheckboxField.js";
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { useTranslation as
|
|
3
|
-
import { useCreateSignatory as
|
|
2
|
+
import { useTranslation as p } from "react-i18next";
|
|
3
|
+
import { useCreateSignatory as c } from "./useCreateSignatory.js";
|
|
4
4
|
import { Flex as o } from "../../../Common/Flex/Flex.js";
|
|
5
5
|
import { Grid as n } from "../../../Common/Grid/Grid.js";
|
|
6
|
+
import "classnames";
|
|
6
7
|
import { TextInputField as s } from "../../../Common/Fields/TextInputField/TextInputField.js";
|
|
7
8
|
import { DatePickerField as u } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
|
|
8
9
|
import { useComponentContext as g } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
@@ -12,8 +13,8 @@ import { usePlaceholderSSN as f, normalizeSSN as y } from "../../../../helpers/s
|
|
|
12
13
|
import { TitleSelect as b } from "../TitleSelect.js";
|
|
13
14
|
import { useMaskedTransform as S, commonMasks as D } from "../../../../helpers/mask.js";
|
|
14
15
|
import { SelectField as M } from "../../../Common/Fields/SelectField/SelectField.js";
|
|
15
|
-
const
|
|
16
|
-
const i = g(), { currentSignatory: t } =
|
|
16
|
+
const E = () => {
|
|
17
|
+
const i = g(), { currentSignatory: t } = c(), { t: e } = p("Company.AssignSignatory"), d = f(t?.hasSsn), m = S(D.phoneMask);
|
|
17
18
|
return /* @__PURE__ */ a(o, { flexDirection: "column", gap: 32, children: [
|
|
18
19
|
/* @__PURE__ */ a(o, { flexDirection: "column", gap: 12, children: [
|
|
19
20
|
/* @__PURE__ */ a("header", { children: [
|
|
@@ -135,6 +136,6 @@ const A = () => {
|
|
|
135
136
|
] });
|
|
136
137
|
};
|
|
137
138
|
export {
|
|
138
|
-
|
|
139
|
+
E as CreateSignatoryForm
|
|
139
140
|
};
|
|
140
141
|
//# sourceMappingURL=CreateSignatoryForm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CreateSignatoryForm.js","sources":["../../../../../src/components/Company/AssignSignatory/CreateSignatory/CreateSignatoryForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { z } from 'zod'\nimport { useCreateSignatory } from './useCreateSignatory'\nimport type { generateCreateSignatorySchema } from './Schema'\nimport { TextInputField, Grid, Flex, SelectField, DatePickerField } from '@/components/Common'\nimport { STATES_ABBR } from '@/shared/constants'\nimport { normalizeSSN, usePlaceholderSSN } from '@/helpers/ssn'\nimport { TitleSelect } from '@/components/Company/AssignSignatory/TitleSelect'\nimport { commonMasks, useMaskedTransform } from '@/helpers/mask'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type CreateSignatoryInputs = z.infer<ReturnType<typeof generateCreateSignatorySchema>>\n\nexport const CreateSignatoryForm = () => {\n const Components = useComponentContext()\n const { currentSignatory } = useCreateSignatory()\n const { t } = useTranslation('Company.AssignSignatory')\n const placeholderSSN = usePlaceholderSSN(currentSignatory?.hasSsn)\n const transformPhone = useMaskedTransform(commonMasks.phoneMask)\n\n return (\n <Flex flexDirection=\"column\" gap={32}>\n <Flex flexDirection=\"column\" gap={12}>\n <header>\n <Components.Heading as=\"h2\">{t('signatoryDetails.title')}</Components.Heading>\n <Components.Text>{t('signatoryDetails.description')}</Components.Text>\n </header>\n\n <Grid gridTemplateColumns={{ base: '1fr', small: ['1fr', '1fr'] }} gap={20}>\n <TextInputField\n name=\"firstName\"\n label={t('signatoryDetails.firstName')}\n isRequired\n errorMessage={t('validations.firstName')}\n />\n <TextInputField\n name=\"lastName\"\n label={t('signatoryDetails.lastName')}\n isRequired\n errorMessage={t('validations.lastName')}\n />\n <TextInputField\n name=\"email\"\n label={t('signatoryDetails.email')}\n isRequired\n errorMessage={t('validations.email')}\n isDisabled={Boolean(currentSignatory)}\n />\n <TitleSelect />\n <TextInputField\n name=\"phone\"\n label={t('signatoryDetails.phone')}\n isRequired\n errorMessage={t('validations.phone')}\n transform={transformPhone}\n />\n <TextInputField\n name=\"ssn\"\n label={t('signatoryDetails.ssn')}\n errorMessage={t('validations.ssn', { ns: 'common' })}\n isRequired={!currentSignatory?.hasSsn}\n transform={normalizeSSN}\n placeholder={placeholderSSN}\n />\n <DatePickerField\n name=\"birthday\"\n label={t('signatoryDetails.birthday')}\n errorMessage={t('validations.dob')}\n isRequired\n />\n </Grid>\n </Flex>\n\n <Flex flexDirection=\"column\" gap={12}>\n <header>\n <Components.Heading as=\"h2\">{t('address.title')}</Components.Heading>\n <Components.Text>{t('address.description')}</Components.Text>\n </header>\n\n <Grid gridTemplateColumns={{ base: '1fr', small: ['1fr', '1fr'] }} gap={20}>\n <TextInputField\n name=\"street1\"\n label={t('address.street1')}\n isRequired\n errorMessage={t('validations.address.street1')}\n />\n <TextInputField name=\"street2\" label={t('address.street2')} />\n <TextInputField\n name=\"city\"\n label={t('address.city')}\n isRequired\n errorMessage={t('validations.address.city')}\n />\n <SelectField\n name=\"state\"\n options={STATES_ABBR.map((stateAbbr: (typeof STATES_ABBR)[number]) => ({\n label: t(`statesHash.${stateAbbr}`, { ns: 'common' }),\n value: stateAbbr,\n }))}\n label={t('address.state')}\n placeholder={t('address.statePlaceholder')}\n errorMessage={t('validations.address.state')}\n isRequired\n />\n <TextInputField\n name=\"zip\"\n label={t('address.zip')}\n isRequired\n errorMessage={t('validations.address.zip')}\n />\n </Grid>\n </Flex>\n </Flex>\n )\n}\n"],"names":["CreateSignatoryForm","Components","useComponentContext","currentSignatory","useCreateSignatory","t","useTranslation","placeholderSSN","usePlaceholderSSN","transformPhone","useMaskedTransform","commonMasks","jsxs","Flex","jsx","Grid","TextInputField","TitleSelect","normalizeSSN","DatePickerField","SelectField","STATES_ABBR","stateAbbr"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CreateSignatoryForm.js","sources":["../../../../../src/components/Company/AssignSignatory/CreateSignatory/CreateSignatoryForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { z } from 'zod'\nimport { useCreateSignatory } from './useCreateSignatory'\nimport type { generateCreateSignatorySchema } from './Schema'\nimport { TextInputField, Grid, Flex, SelectField, DatePickerField } from '@/components/Common'\nimport { STATES_ABBR } from '@/shared/constants'\nimport { normalizeSSN, usePlaceholderSSN } from '@/helpers/ssn'\nimport { TitleSelect } from '@/components/Company/AssignSignatory/TitleSelect'\nimport { commonMasks, useMaskedTransform } from '@/helpers/mask'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type CreateSignatoryInputs = z.infer<ReturnType<typeof generateCreateSignatorySchema>>\n\nexport const CreateSignatoryForm = () => {\n const Components = useComponentContext()\n const { currentSignatory } = useCreateSignatory()\n const { t } = useTranslation('Company.AssignSignatory')\n const placeholderSSN = usePlaceholderSSN(currentSignatory?.hasSsn)\n const transformPhone = useMaskedTransform(commonMasks.phoneMask)\n\n return (\n <Flex flexDirection=\"column\" gap={32}>\n <Flex flexDirection=\"column\" gap={12}>\n <header>\n <Components.Heading as=\"h2\">{t('signatoryDetails.title')}</Components.Heading>\n <Components.Text>{t('signatoryDetails.description')}</Components.Text>\n </header>\n\n <Grid gridTemplateColumns={{ base: '1fr', small: ['1fr', '1fr'] }} gap={20}>\n <TextInputField\n name=\"firstName\"\n label={t('signatoryDetails.firstName')}\n isRequired\n errorMessage={t('validations.firstName')}\n />\n <TextInputField\n name=\"lastName\"\n label={t('signatoryDetails.lastName')}\n isRequired\n errorMessage={t('validations.lastName')}\n />\n <TextInputField\n name=\"email\"\n label={t('signatoryDetails.email')}\n isRequired\n errorMessage={t('validations.email')}\n isDisabled={Boolean(currentSignatory)}\n />\n <TitleSelect />\n <TextInputField\n name=\"phone\"\n label={t('signatoryDetails.phone')}\n isRequired\n errorMessage={t('validations.phone')}\n transform={transformPhone}\n />\n <TextInputField\n name=\"ssn\"\n label={t('signatoryDetails.ssn')}\n errorMessage={t('validations.ssn', { ns: 'common' })}\n isRequired={!currentSignatory?.hasSsn}\n transform={normalizeSSN}\n placeholder={placeholderSSN}\n />\n <DatePickerField\n name=\"birthday\"\n label={t('signatoryDetails.birthday')}\n errorMessage={t('validations.dob')}\n isRequired\n />\n </Grid>\n </Flex>\n\n <Flex flexDirection=\"column\" gap={12}>\n <header>\n <Components.Heading as=\"h2\">{t('address.title')}</Components.Heading>\n <Components.Text>{t('address.description')}</Components.Text>\n </header>\n\n <Grid gridTemplateColumns={{ base: '1fr', small: ['1fr', '1fr'] }} gap={20}>\n <TextInputField\n name=\"street1\"\n label={t('address.street1')}\n isRequired\n errorMessage={t('validations.address.street1')}\n />\n <TextInputField name=\"street2\" label={t('address.street2')} />\n <TextInputField\n name=\"city\"\n label={t('address.city')}\n isRequired\n errorMessage={t('validations.address.city')}\n />\n <SelectField\n name=\"state\"\n options={STATES_ABBR.map((stateAbbr: (typeof STATES_ABBR)[number]) => ({\n label: t(`statesHash.${stateAbbr}`, { ns: 'common' }),\n value: stateAbbr,\n }))}\n label={t('address.state')}\n placeholder={t('address.statePlaceholder')}\n errorMessage={t('validations.address.state')}\n isRequired\n />\n <TextInputField\n name=\"zip\"\n label={t('address.zip')}\n isRequired\n errorMessage={t('validations.address.zip')}\n />\n </Grid>\n </Flex>\n </Flex>\n )\n}\n"],"names":["CreateSignatoryForm","Components","useComponentContext","currentSignatory","useCreateSignatory","t","useTranslation","placeholderSSN","usePlaceholderSSN","transformPhone","useMaskedTransform","commonMasks","jsxs","Flex","jsx","Grid","TextInputField","TitleSelect","normalizeSSN","DatePickerField","SelectField","STATES_ABBR","stateAbbr"],"mappings":"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"}
|
|
@@ -4,12 +4,13 @@ import { useFormContext as u } from "react-hook-form";
|
|
|
4
4
|
import { useTranslation as E } from "react-i18next";
|
|
5
5
|
import { Flex as S } from "../../../Common/Flex/Flex.js";
|
|
6
6
|
import { Grid as v } from "../../../Common/Grid/Grid.js";
|
|
7
|
+
import "classnames";
|
|
7
8
|
import { TextInputField as a } from "../../../Common/Fields/TextInputField/TextInputField.js";
|
|
8
9
|
import { useComponentContext as y } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
9
10
|
import "react";
|
|
10
11
|
import { nameValidation as l } from "../../../../helpers/validations.js";
|
|
11
12
|
import { TitleSelect as x } from "../TitleSelect.js";
|
|
12
|
-
const m = "email_mismatch",
|
|
13
|
+
const m = "email_mismatch", A = r.object({
|
|
13
14
|
firstName: l,
|
|
14
15
|
lastName: l,
|
|
15
16
|
email: r.string().min(1).email(),
|
|
@@ -18,7 +19,7 @@ const m = "email_mismatch", z = r.object({
|
|
|
18
19
|
}).refine((i) => i.email === i.confirmEmail, {
|
|
19
20
|
message: m,
|
|
20
21
|
path: ["confirmEmail"]
|
|
21
|
-
}),
|
|
22
|
+
}), D = () => {
|
|
22
23
|
const { t: i } = E("Company.AssignSignatory"), o = y(), {
|
|
23
24
|
setError: c,
|
|
24
25
|
clearErrors: f,
|
|
@@ -75,7 +76,7 @@ const m = "email_mismatch", z = r.object({
|
|
|
75
76
|
] });
|
|
76
77
|
};
|
|
77
78
|
export {
|
|
78
|
-
|
|
79
|
-
|
|
79
|
+
D as InviteSignatoryForm,
|
|
80
|
+
A as InviteSignatorySchema
|
|
80
81
|
};
|
|
81
82
|
//# sourceMappingURL=InviteSignatoryForm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InviteSignatoryForm.js","sources":["../../../../../src/components/Company/AssignSignatory/InviteSignatory/InviteSignatoryForm.tsx"],"sourcesContent":["import { z } from 'zod'\nimport { useFormContext } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { TextInputField, Grid, Flex } from '@/components/Common'\nimport { nameValidation } from '@/helpers/validations'\nimport { TitleSelect } from '@/components/Company/AssignSignatory/TitleSelect'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nconst emailMismatchError = 'email_mismatch'\n\nexport const InviteSignatorySchema = z\n .object({\n firstName: nameValidation,\n lastName: nameValidation,\n email: z.string().min(1).email(),\n confirmEmail: z.string().min(1).email(),\n title: z.string().min(1),\n })\n .refine(data => data.email === data.confirmEmail, {\n message: emailMismatchError,\n path: ['confirmEmail'],\n })\n\nexport type InviteSignatoryInputs = z.infer<typeof InviteSignatorySchema>\n\nexport const InviteSignatoryForm = () => {\n const { t } = useTranslation('Company.AssignSignatory')\n const Components = useComponentContext()\n\n const {\n setError,\n clearErrors,\n formState: { errors, isSubmitted },\n watch,\n } = useFormContext()\n\n // Some workarounds here to also ensure that modifying the email field\n // sets and clears the confirm_email field error state\n const confirmEmail = watch('confirmEmail')\n\n const handleEmailChange = (value: string) => {\n if (isSubmitted) {\n if (value === confirmEmail) {\n clearErrors('confirmEmail')\n }\n\n if (value !== confirmEmail) {\n setError('confirmEmail', { message: emailMismatchError })\n }\n }\n }\n\n return (\n <Flex flexDirection=\"column\" gap={12}>\n <header>\n <Components.Heading as=\"h2\">{t('inviteSignatory.title')}</Components.Heading>\n <Components.Text>{t('inviteSignatory.description')}</Components.Text>\n </header>\n\n <Grid gridTemplateColumns={{ base: '1fr', small: ['1fr', '1fr'] }} gap={20}>\n <TextInputField\n name=\"email\"\n label={t('inviteSignatory.signatoryEmail')}\n isRequired\n errorMessage={t('validations.email')}\n onChange={handleEmailChange}\n />\n <TextInputField\n name=\"confirmEmail\"\n label={t('inviteSignatory.confirmEmail')}\n isRequired\n errorMessage={\n errors.confirmEmail?.message === emailMismatchError\n ? t('validations.emailMismatch')\n : t('validations.email')\n }\n />\n <TextInputField\n name=\"firstName\"\n label={t('inviteSignatory.firstName')}\n isRequired\n errorMessage={t('validations.firstName')}\n />\n <TextInputField\n name=\"lastName\"\n label={t('inviteSignatory.lastName')}\n isRequired\n errorMessage={t('validations.lastName')}\n />\n <TitleSelect />\n </Grid>\n </Flex>\n )\n}\n"],"names":["emailMismatchError","InviteSignatorySchema","z","nameValidation","data","InviteSignatoryForm","t","useTranslation","Components","useComponentContext","setError","clearErrors","errors","isSubmitted","watch","useFormContext","confirmEmail","handleEmailChange","value","jsxs","Flex","jsx","Grid","TextInputField","TitleSelect"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InviteSignatoryForm.js","sources":["../../../../../src/components/Company/AssignSignatory/InviteSignatory/InviteSignatoryForm.tsx"],"sourcesContent":["import { z } from 'zod'\nimport { useFormContext } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { TextInputField, Grid, Flex } from '@/components/Common'\nimport { nameValidation } from '@/helpers/validations'\nimport { TitleSelect } from '@/components/Company/AssignSignatory/TitleSelect'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nconst emailMismatchError = 'email_mismatch'\n\nexport const InviteSignatorySchema = z\n .object({\n firstName: nameValidation,\n lastName: nameValidation,\n email: z.string().min(1).email(),\n confirmEmail: z.string().min(1).email(),\n title: z.string().min(1),\n })\n .refine(data => data.email === data.confirmEmail, {\n message: emailMismatchError,\n path: ['confirmEmail'],\n })\n\nexport type InviteSignatoryInputs = z.infer<typeof InviteSignatorySchema>\n\nexport const InviteSignatoryForm = () => {\n const { t } = useTranslation('Company.AssignSignatory')\n const Components = useComponentContext()\n\n const {\n setError,\n clearErrors,\n formState: { errors, isSubmitted },\n watch,\n } = useFormContext()\n\n // Some workarounds here to also ensure that modifying the email field\n // sets and clears the confirm_email field error state\n const confirmEmail = watch('confirmEmail')\n\n const handleEmailChange = (value: string) => {\n if (isSubmitted) {\n if (value === confirmEmail) {\n clearErrors('confirmEmail')\n }\n\n if (value !== confirmEmail) {\n setError('confirmEmail', { message: emailMismatchError })\n }\n }\n }\n\n return (\n <Flex flexDirection=\"column\" gap={12}>\n <header>\n <Components.Heading as=\"h2\">{t('inviteSignatory.title')}</Components.Heading>\n <Components.Text>{t('inviteSignatory.description')}</Components.Text>\n </header>\n\n <Grid gridTemplateColumns={{ base: '1fr', small: ['1fr', '1fr'] }} gap={20}>\n <TextInputField\n name=\"email\"\n label={t('inviteSignatory.signatoryEmail')}\n isRequired\n errorMessage={t('validations.email')}\n onChange={handleEmailChange}\n />\n <TextInputField\n name=\"confirmEmail\"\n label={t('inviteSignatory.confirmEmail')}\n isRequired\n errorMessage={\n errors.confirmEmail?.message === emailMismatchError\n ? t('validations.emailMismatch')\n : t('validations.email')\n }\n />\n <TextInputField\n name=\"firstName\"\n label={t('inviteSignatory.firstName')}\n isRequired\n errorMessage={t('validations.firstName')}\n />\n <TextInputField\n name=\"lastName\"\n label={t('inviteSignatory.lastName')}\n isRequired\n errorMessage={t('validations.lastName')}\n />\n <TitleSelect />\n </Grid>\n </Flex>\n )\n}\n"],"names":["emailMismatchError","InviteSignatorySchema","z","nameValidation","data","InviteSignatoryForm","t","useTranslation","Components","useComponentContext","setError","clearErrors","errors","isSubmitted","watch","useFormContext","confirmEmail","handleEmailChange","value","jsxs","Flex","jsx","Grid","TextInputField","TitleSelect"],"mappings":";;;;;;;;;;;;AAQA,MAAMA,IAAqB,kBAEdC,IAAwBC,EAClC,OAAO;AAAA,EACN,WAAWC;AAAA,EACX,UAAUA;AAAA,EACV,OAAOD,EAAE,OAAA,EAAS,IAAI,CAAC,EAAE,MAAA;AAAA,EACzB,cAAcA,EAAE,OAAA,EAAS,IAAI,CAAC,EAAE,MAAA;AAAA,EAChC,OAAOA,EAAE,OAAA,EAAS,IAAI,CAAC;AACzB,CAAC,EACA,OAAO,CAAAE,MAAQA,EAAK,UAAUA,EAAK,cAAc;AAAA,EAChD,SAASJ;AAAA,EACT,MAAM,CAAC,cAAc;AACvB,CAAC,GAIUK,IAAsB,MAAM;AACvC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,yBAAyB,GAChDC,IAAaC,EAAA,GAEb;AAAA,IACJ,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAW,EAAE,QAAAC,GAAQ,aAAAC,EAAA;AAAA,IACrB,OAAAC;AAAA,EAAA,IACEC,EAAA,GAIEC,IAAeF,EAAM,cAAc,GAEnCG,IAAoB,CAACC,MAAkB;AAC3C,IAAIL,MACEK,MAAUF,KACZL,EAAY,cAAc,GAGxBO,MAAUF,KACZN,EAAS,gBAAgB,EAAE,SAASV,EAAA,CAAoB;AAAA,EAG9D;AAEA,SACE,gBAAAmB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAAC,UAAA,EACC,UAAA;AAAA,MAAA,gBAAAE,EAACb,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAAF,EAAE,uBAAuB,GAAE;AAAA,wBACvDE,EAAW,MAAX,EAAiB,UAAAF,EAAE,6BAA6B,EAAA,CAAE;AAAA,IAAA,GACrD;AAAA,IAEA,gBAAAa,EAACG,GAAA,EAAK,qBAAqB,EAAE,MAAM,OAAO,OAAO,CAAC,OAAO,KAAK,EAAA,GAAK,KAAK,IACtE,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOjB,EAAE,gCAAgC;AAAA,UACzC,YAAU;AAAA,UACV,cAAcA,EAAE,mBAAmB;AAAA,UACnC,UAAUW;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ,gBAAAI;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOjB,EAAE,8BAA8B;AAAA,UACvC,YAAU;AAAA,UACV,cACEM,EAAO,cAAc,YAAYZ,IAC7BM,EAAE,2BAA2B,IAC7BA,EAAE,mBAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,MAG7B,gBAAAe;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOjB,EAAE,2BAA2B;AAAA,UACpC,YAAU;AAAA,UACV,cAAcA,EAAE,uBAAuB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEzC,gBAAAe;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOjB,EAAE,0BAA0B;AAAA,UACnC,YAAU;AAAA,UACV,cAAcA,EAAE,sBAAsB;AAAA,QAAA;AAAA,MAAA;AAAA,wBAEvCkB,GAAA,CAAA,CAAY;AAAA,IAAA,EAAA,CACf;AAAA,EAAA,GACF;AAEJ;"}
|
|
@@ -4,6 +4,7 @@ import { useTranslation as l } from "react-i18next";
|
|
|
4
4
|
import { zipValidation as n, phoneValidation as m } from "../../../../helpers/validations.js";
|
|
5
5
|
import { Flex as d } from "../../../Common/Flex/Flex.js";
|
|
6
6
|
import { Grid as p } from "../../../Common/Grid/Grid.js";
|
|
7
|
+
import "classnames";
|
|
7
8
|
import { TextInputField as s } from "../../../Common/Fields/TextInputField/TextInputField.js";
|
|
8
9
|
import "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
9
10
|
import "react";
|
|
@@ -11,7 +12,7 @@ import { STATES_ABBR as c } from "../../../../shared/constants.js";
|
|
|
11
12
|
import { useMaskedTransform as u, commonMasks as b } from "../../../../helpers/mask.js";
|
|
12
13
|
import { SelectField as f } from "../../../Common/Fields/SelectField/SelectField.js";
|
|
13
14
|
import { CheckboxGroupField as g } from "../../../Common/Fields/CheckboxGroupField/CheckboxGroupField.js";
|
|
14
|
-
const
|
|
15
|
+
const j = i.object({
|
|
15
16
|
phoneNumber: m,
|
|
16
17
|
street1: i.string().min(1),
|
|
17
18
|
street2: i.string().optional(),
|
|
@@ -20,7 +21,7 @@ const S = i.object({
|
|
|
20
21
|
zip: n,
|
|
21
22
|
addressType: i.array(i.enum(["mailingAddress", "filingAddress"])).optional()
|
|
22
23
|
});
|
|
23
|
-
function
|
|
24
|
+
function C() {
|
|
24
25
|
const { t: e } = l("Company.Locations"), o = u(b.phoneMask);
|
|
25
26
|
return /* @__PURE__ */ t(d, { flexDirection: "column", gap: 20, children: [
|
|
26
27
|
/* @__PURE__ */ t(
|
|
@@ -106,7 +107,7 @@ function j() {
|
|
|
106
107
|
] });
|
|
107
108
|
}
|
|
108
109
|
export {
|
|
109
|
-
|
|
110
|
-
|
|
110
|
+
C as Form,
|
|
111
|
+
j as LocationFormSchema
|
|
111
112
|
};
|
|
112
113
|
//# sourceMappingURL=Form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sources":["../../../../../src/components/Company/Locations/LocationForm/Form.tsx"],"sourcesContent":["import { z } from 'zod'\nimport { useTranslation } from 'react-i18next'\nimport { phoneValidation, zipValidation } from '@/helpers/validations'\nimport { CheckboxGroupField, Flex, Grid, SelectField, TextInputField } from '@/components/Common'\nimport { STATES_ABBR } from '@/shared/constants'\nimport { commonMasks, useMaskedTransform } from '@/helpers/mask'\n\nexport const LocationFormSchema = z.object({\n phoneNumber: phoneValidation,\n street1: z.string().min(1),\n street2: z.string().optional(),\n city: z.string().min(1),\n state: z.string().min(1),\n zip: zipValidation,\n addressType: z.array(z.enum(['mailingAddress', 'filingAddress'])).optional(),\n})\n\nexport type LocationFormInputs = z.infer<typeof LocationFormSchema>\n\nexport function Form() {\n const { t } = useTranslation('Company.Locations')\n const transform = useMaskedTransform(commonMasks.phoneMask)\n\n return (\n <Flex flexDirection=\"column\" gap={20}>\n <Grid\n gap={{ base: 20, small: 8 }}\n gridTemplateColumns={{ base: '1fr', small: ['1fr', '1fr'] }}\n >\n <TextInputField\n name=\"street1\"\n isRequired\n label={t('street1Label')}\n errorMessage={t('validations.street1')}\n />\n <TextInputField name=\"street2\" label={t('street2Label')} />\n <TextInputField\n name=\"city\"\n label={t('cityLabel')}\n isRequired\n errorMessage={t('validations.city')}\n />\n <SelectField\n name=\"state\"\n options={STATES_ABBR.map((stateAbbr: (typeof STATES_ABBR)[number]) => ({\n label: t(`statesHash.${stateAbbr}`, { ns: 'common' }),\n value: stateAbbr,\n }))}\n label={t('stateLabel')}\n placeholder={t('statePlaceholder')}\n errorMessage={t('validations.state')}\n isRequired\n />\n <TextInputField\n name=\"zip\"\n isRequired\n label={t('zipLabel')}\n errorMessage={t('validations.zip')}\n />\n <TextInputField\n name=\"phoneNumber\"\n isRequired\n label={t('phoneNumberLabel')}\n errorMessage={t('validations.phone')}\n transform={transform}\n />\n </Grid>\n <CheckboxGroupField\n name=\"addressType\"\n label={t('addressTypeLabel')}\n options={[\n {\n value: 'mailingAddress',\n label: t('mailingAddressLabel'),\n description: t('mailingAddressDescription'),\n },\n {\n value: 'filingAddress',\n label: t('filingAddressLabel'),\n description: t('filingAddressDescription'),\n },\n ]}\n />\n </Flex>\n )\n}\n"],"names":["LocationFormSchema","z","phoneValidation","zipValidation","Form","t","useTranslation","transform","useMaskedTransform","commonMasks","jsxs","Flex","Grid","jsx","TextInputField","SelectField","STATES_ABBR","stateAbbr","CheckboxGroupField"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Form.js","sources":["../../../../../src/components/Company/Locations/LocationForm/Form.tsx"],"sourcesContent":["import { z } from 'zod'\nimport { useTranslation } from 'react-i18next'\nimport { phoneValidation, zipValidation } from '@/helpers/validations'\nimport { CheckboxGroupField, Flex, Grid, SelectField, TextInputField } from '@/components/Common'\nimport { STATES_ABBR } from '@/shared/constants'\nimport { commonMasks, useMaskedTransform } from '@/helpers/mask'\n\nexport const LocationFormSchema = z.object({\n phoneNumber: phoneValidation,\n street1: z.string().min(1),\n street2: z.string().optional(),\n city: z.string().min(1),\n state: z.string().min(1),\n zip: zipValidation,\n addressType: z.array(z.enum(['mailingAddress', 'filingAddress'])).optional(),\n})\n\nexport type LocationFormInputs = z.infer<typeof LocationFormSchema>\n\nexport function Form() {\n const { t } = useTranslation('Company.Locations')\n const transform = useMaskedTransform(commonMasks.phoneMask)\n\n return (\n <Flex flexDirection=\"column\" gap={20}>\n <Grid\n gap={{ base: 20, small: 8 }}\n gridTemplateColumns={{ base: '1fr', small: ['1fr', '1fr'] }}\n >\n <TextInputField\n name=\"street1\"\n isRequired\n label={t('street1Label')}\n errorMessage={t('validations.street1')}\n />\n <TextInputField name=\"street2\" label={t('street2Label')} />\n <TextInputField\n name=\"city\"\n label={t('cityLabel')}\n isRequired\n errorMessage={t('validations.city')}\n />\n <SelectField\n name=\"state\"\n options={STATES_ABBR.map((stateAbbr: (typeof STATES_ABBR)[number]) => ({\n label: t(`statesHash.${stateAbbr}`, { ns: 'common' }),\n value: stateAbbr,\n }))}\n label={t('stateLabel')}\n placeholder={t('statePlaceholder')}\n errorMessage={t('validations.state')}\n isRequired\n />\n <TextInputField\n name=\"zip\"\n isRequired\n label={t('zipLabel')}\n errorMessage={t('validations.zip')}\n />\n <TextInputField\n name=\"phoneNumber\"\n isRequired\n label={t('phoneNumberLabel')}\n errorMessage={t('validations.phone')}\n transform={transform}\n />\n </Grid>\n <CheckboxGroupField\n name=\"addressType\"\n label={t('addressTypeLabel')}\n options={[\n {\n value: 'mailingAddress',\n label: t('mailingAddressLabel'),\n description: t('mailingAddressDescription'),\n },\n {\n value: 'filingAddress',\n label: t('filingAddressLabel'),\n description: t('filingAddressDescription'),\n },\n ]}\n />\n </Flex>\n )\n}\n"],"names":["LocationFormSchema","z","phoneValidation","zipValidation","Form","t","useTranslation","transform","useMaskedTransform","commonMasks","jsxs","Flex","Grid","jsx","TextInputField","SelectField","STATES_ABBR","stateAbbr","CheckboxGroupField"],"mappings":";;;;;;;;;;;;;;AAOO,MAAMA,IAAqBC,EAAE,OAAO;AAAA,EACzC,aAAaC;AAAA,EACb,SAASD,EAAE,SAAS,IAAI,CAAC;AAAA,EACzB,SAASA,EAAE,OAAA,EAAS,SAAA;AAAA,EACpB,MAAMA,EAAE,SAAS,IAAI,CAAC;AAAA,EACtB,OAAOA,EAAE,SAAS,IAAI,CAAC;AAAA,EACvB,KAAKE;AAAA,EACL,aAAaF,EAAE,MAAMA,EAAE,KAAK,CAAC,kBAAkB,eAAe,CAAC,CAAC,EAAE,SAAA;AACpE,CAAC;AAIM,SAASG,IAAO;AACrB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,mBAAmB,GAC1CC,IAAYC,EAAmBC,EAAY,SAAS;AAE1D,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,KAAK,EAAE,MAAM,IAAI,OAAO,EAAA;AAAA,QACxB,qBAAqB,EAAE,MAAM,OAAO,OAAO,CAAC,OAAO,KAAK,EAAA;AAAA,QAExD,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,YAAU;AAAA,cACV,OAAOT,EAAE,cAAc;AAAA,cACvB,cAAcA,EAAE,qBAAqB;AAAA,YAAA;AAAA,UAAA;AAAA,4BAEtCS,GAAA,EAAe,MAAK,WAAU,OAAOT,EAAE,cAAc,GAAG;AAAA,UACzD,gBAAAQ;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAOT,EAAE,WAAW;AAAA,cACpB,YAAU;AAAA,cACV,cAAcA,EAAE,kBAAkB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEpC,gBAAAQ;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAASC,EAAY,IAAI,CAACC,OAA6C;AAAA,gBACrE,OAAOZ,EAAE,cAAcY,CAAS,IAAI,EAAE,IAAI,UAAU;AAAA,gBACpD,OAAOA;AAAA,cAAA,EACP;AAAA,cACF,OAAOZ,EAAE,YAAY;AAAA,cACrB,aAAaA,EAAE,kBAAkB;AAAA,cACjC,cAAcA,EAAE,mBAAmB;AAAA,cACnC,YAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,gBAAAQ;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,YAAU;AAAA,cACV,OAAOT,EAAE,UAAU;AAAA,cACnB,cAAcA,EAAE,iBAAiB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEnC,gBAAAQ;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,YAAU;AAAA,cACV,OAAOT,EAAE,kBAAkB;AAAA,cAC3B,cAAcA,EAAE,mBAAmB;AAAA,cACnC,WAAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAM;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOb,EAAE,kBAAkB;AAAA,QAC3B,SAAS;AAAA,UACP;AAAA,YACE,OAAO;AAAA,YACP,OAAOA,EAAE,qBAAqB;AAAA,YAC9B,aAAaA,EAAE,2BAA2B;AAAA,UAAA;AAAA,UAE5C;AAAA,YACE,OAAO;AAAA,YACP,OAAOA,EAAE,oBAAoB;AAAA,YAC7B,aAAaA,EAAE,0BAA0B;AAAA,UAAA;AAAA,QAC3C;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
|
|
@@ -6,6 +6,7 @@ import { usePaySchedule as T } from "../usePaySchedule.js";
|
|
|
6
6
|
import l from "./Edit.module.scss.js";
|
|
7
7
|
import { Flex as y } from "../../../Common/Flex/Flex.js";
|
|
8
8
|
import { Grid as x } from "../../../Common/Grid/Grid.js";
|
|
9
|
+
import "classnames";
|
|
9
10
|
import { RadioGroupField as E } from "../../../Common/Fields/RadioGroupField/RadioGroupField.js";
|
|
10
11
|
import { TextInputField as N } from "../../../Common/Fields/TextInputField/TextInputField.js";
|
|
11
12
|
import { DatePickerField as h } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
|
|
@@ -13,11 +14,11 @@ import { NumberInputField as f } from "../../../Common/Fields/NumberInputField/N
|
|
|
13
14
|
import { useComponentContext as F } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
14
15
|
import { useDateFormatter as R } from "../../../../hooks/useDateFormatter.js";
|
|
15
16
|
import { SelectField as O } from "../../../Common/Fields/SelectField/SelectField.js";
|
|
16
|
-
const
|
|
17
|
-
const
|
|
17
|
+
const K = () => {
|
|
18
|
+
const o = F(), { t: e } = C("Company.PaySchedule"), P = R(), { payPeriodPreview: r, mode: u, payPreviewLoading: D } = T(), { setValue: d } = q(), [a, v] = g(0), i = p({ name: "frequency" }), n = p({ name: "customTwicePerMonth" }), b = i === "Twice per month" && n === "custom" || i === "Monthly", w = i === "Twice per month" && n === "custom";
|
|
18
19
|
return S(() => {
|
|
19
|
-
i === "Twice per month" &&
|
|
20
|
-
}, [i,
|
|
20
|
+
i === "Twice per month" && n === "1st15th" && (d("day1", 15), d("day2", 31));
|
|
21
|
+
}, [i, n, d]), u !== "EDIT_PAY_SCHEDULE" && u !== "ADD_PAY_SCHEDULE" ? null : /* @__PURE__ */ t("div", { className: l.payScheduleContainer, children: /* @__PURE__ */ m(x, { gap: 32, gridTemplateColumns: { base: "1fr", small: "1fr 1fr" }, children: [
|
|
21
22
|
/* @__PURE__ */ t("div", { className: l.payScheduleForm, children: /* @__PURE__ */ m(y, { flexDirection: "column", children: [
|
|
22
23
|
/* @__PURE__ */ t(N, { name: "customName", label: e("labels.name"), isRequired: !0 }),
|
|
23
24
|
/* @__PURE__ */ t(
|
|
@@ -69,7 +70,7 @@ const J = () => {
|
|
|
69
70
|
] }) }),
|
|
70
71
|
/* @__PURE__ */ t(y, { flexDirection: "column", gap: 4, justifyContent: "center", alignItems: "center", children: r && r[a] ? /* @__PURE__ */ m("div", { className: l.calendarContainer, children: [
|
|
71
72
|
!D && /* @__PURE__ */ t(
|
|
72
|
-
|
|
73
|
+
o.Select,
|
|
73
74
|
{
|
|
74
75
|
label: e("labels.preview"),
|
|
75
76
|
isRequired: !0,
|
|
@@ -85,7 +86,7 @@ const J = () => {
|
|
|
85
86
|
}
|
|
86
87
|
),
|
|
87
88
|
/* @__PURE__ */ t(
|
|
88
|
-
|
|
89
|
+
o.CalendarPreview,
|
|
89
90
|
{
|
|
90
91
|
dateRange: {
|
|
91
92
|
start: new Date(r[a].startDate),
|
|
@@ -108,11 +109,11 @@ const J = () => {
|
|
|
108
109
|
a
|
|
109
110
|
)
|
|
110
111
|
] }) : /* @__PURE__ */ t("div", { className: l.calendarContainer, children: /* @__PURE__ */ t(
|
|
111
|
-
|
|
112
|
+
o.Alert,
|
|
112
113
|
{
|
|
113
114
|
status: "info",
|
|
114
115
|
label: e("previewAlert.title", "Pay Schedule Preview"),
|
|
115
|
-
children: /* @__PURE__ */ t(
|
|
116
|
+
children: /* @__PURE__ */ t(o.Text, { children: e(
|
|
116
117
|
"previewAlert.description",
|
|
117
118
|
"Complete all the required fields on the left to see a preview of your pay schedule."
|
|
118
119
|
) })
|
|
@@ -121,6 +122,6 @@ const J = () => {
|
|
|
121
122
|
] }) });
|
|
122
123
|
};
|
|
123
124
|
export {
|
|
124
|
-
|
|
125
|
+
K as Edit
|
|
125
126
|
};
|
|
126
127
|
//# 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 { useDateFormatter } from '@/hooks/useDateFormatter'\n\nexport const Edit = () => {\n const Components = useComponentContext()\n const { t } = useTranslation('Company.PaySchedule')\n const dateFormatter = useDateFormatter()\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\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 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={t('labels.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 <Components.Select\n label={t('labels.preview')}\n isRequired\n options={payPeriodPreview.map((period, index) => {\n return {\n value: String(index),\n label: dateFormatter.formatPayPeriodRange(period.startDate, period.endDate),\n }\n })}\n value={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","dateFormatter","useDateFormatter","payPeriodPreview","mode","payPreviewLoading","usePaySchedule","setValue","useFormContext","selectedPayPeriodIndex","setSelectedPayPeriodIndex","useState","frequency","useWatch","customTwicePerMonth","shouldShowDay1","shouldShowDay2","useEffect","jsx","style","jsxs","Grid","Flex","TextInputField","SelectField","RadioGroupField","DatePickerField","NumberInputField","period","index","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 { useDateFormatter } from '@/hooks/useDateFormatter'\n\nexport const Edit = () => {\n const Components = useComponentContext()\n const { t } = useTranslation('Company.PaySchedule')\n const dateFormatter = useDateFormatter()\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\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 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={t('labels.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 <Components.Select\n label={t('labels.preview')}\n isRequired\n options={payPeriodPreview.map((period, index) => {\n return {\n value: String(index),\n label: dateFormatter.formatPayPeriodRange(period.startDate, period.endDate),\n }\n })}\n value={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","dateFormatter","useDateFormatter","payPeriodPreview","mode","payPreviewLoading","usePaySchedule","setValue","useFormContext","selectedPayPeriodIndex","setSelectedPayPeriodIndex","useState","frequency","useWatch","customTwicePerMonth","shouldShowDay1","shouldShowDay2","useEffect","jsx","style","jsxs","Grid","Flex","TextInputField","SelectField","RadioGroupField","DatePickerField","NumberInputField","period","index","value","numericValue"],"mappings":"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"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useTranslation as
|
|
1
|
+
import { jsxs as i, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useTranslation as s } from "react-i18next";
|
|
3
3
|
import { STATES_ABBR as o } from "../../../shared/constants.js";
|
|
4
4
|
import { Grid as l } from "../../Common/Grid/Grid.js";
|
|
5
|
+
import "classnames";
|
|
5
6
|
import { TextInputField as t } from "../../Common/Fields/TextInputField/TextInputField.js";
|
|
6
7
|
import "../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
7
8
|
import "react";
|
|
8
9
|
import { SelectField as m } from "../../Common/Fields/SelectField/SelectField.js";
|
|
9
|
-
function
|
|
10
|
-
const { t: e } =
|
|
11
|
-
return /* @__PURE__ */
|
|
10
|
+
function T() {
|
|
11
|
+
const { t: e } = s("Contractor.Address");
|
|
12
|
+
return /* @__PURE__ */ i(l, { gridTemplateColumns: { base: "1fr", small: ["1fr", "1fr"] }, gap: 20, children: [
|
|
12
13
|
/* @__PURE__ */ r(
|
|
13
14
|
t,
|
|
14
15
|
{
|
|
@@ -46,6 +47,6 @@ function R() {
|
|
|
46
47
|
] });
|
|
47
48
|
}
|
|
48
49
|
export {
|
|
49
|
-
|
|
50
|
+
T as Form
|
|
50
51
|
};
|
|
51
52
|
//# sourceMappingURL=Form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sources":["../../../../src/components/Contractor/Address/Form.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { TextInputField, SelectField, Grid } from '@/components/Common'\nimport { STATES_ABBR } from '@/shared/constants'\n\nexport function Form() {\n const { t } = useTranslation('Contractor.Address')\n\n return (\n <Grid gridTemplateColumns={{ base: '1fr', small: ['1fr', '1fr'] }} gap={20}>\n <TextInputField\n name=\"street1\"\n label={t('street1')}\n isRequired\n errorMessage={t('validations.street1')}\n />\n <TextInputField name=\"street2\" label={t('street2')} />\n <TextInputField\n name=\"city\"\n label={t('city')}\n isRequired\n errorMessage={t('validations.city')}\n />\n <SelectField\n name=\"state\"\n options={STATES_ABBR.map(stateAbbr => ({\n label: t(`statesHash.${stateAbbr}`, { ns: 'common', defaultValue: stateAbbr }),\n value: stateAbbr,\n }))}\n label={t('state')}\n placeholder={t('statePlaceholder')}\n errorMessage={t('validations.state')}\n isRequired\n />\n <TextInputField name=\"zip\" label={t('zip')} isRequired errorMessage={t('validations.zip')} />\n </Grid>\n )\n}\n"],"names":["Form","t","useTranslation","jsxs","Grid","jsx","TextInputField","SelectField","STATES_ABBR","stateAbbr"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Form.js","sources":["../../../../src/components/Contractor/Address/Form.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { TextInputField, SelectField, Grid } from '@/components/Common'\nimport { STATES_ABBR } from '@/shared/constants'\n\nexport function Form() {\n const { t } = useTranslation('Contractor.Address')\n\n return (\n <Grid gridTemplateColumns={{ base: '1fr', small: ['1fr', '1fr'] }} gap={20}>\n <TextInputField\n name=\"street1\"\n label={t('street1')}\n isRequired\n errorMessage={t('validations.street1')}\n />\n <TextInputField name=\"street2\" label={t('street2')} />\n <TextInputField\n name=\"city\"\n label={t('city')}\n isRequired\n errorMessage={t('validations.city')}\n />\n <SelectField\n name=\"state\"\n options={STATES_ABBR.map(stateAbbr => ({\n label: t(`statesHash.${stateAbbr}`, { ns: 'common', defaultValue: stateAbbr }),\n value: stateAbbr,\n }))}\n label={t('state')}\n placeholder={t('statePlaceholder')}\n errorMessage={t('validations.state')}\n isRequired\n />\n <TextInputField name=\"zip\" label={t('zip')} isRequired errorMessage={t('validations.zip')} />\n </Grid>\n )\n}\n"],"names":["Form","t","useTranslation","jsxs","Grid","jsx","TextInputField","SelectField","STATES_ABBR","stateAbbr"],"mappings":";;;;;;;;;AAIO,SAASA,IAAO;AACrB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,oBAAoB;AAEjD,SACE,gBAAAC,EAACC,GAAA,EAAK,qBAAqB,EAAE,MAAM,OAAO,OAAO,CAAC,OAAO,KAAK,EAAA,GAAK,KAAK,IACtE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOL,EAAE,SAAS;AAAA,QAClB,YAAU;AAAA,QACV,cAAcA,EAAE,qBAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,sBAEtCK,GAAA,EAAe,MAAK,WAAU,OAAOL,EAAE,SAAS,GAAG;AAAA,IACpD,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOL,EAAE,MAAM;AAAA,QACf,YAAU;AAAA,QACV,cAAcA,EAAE,kBAAkB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpC,gBAAAI;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAASC,EAAY,IAAI,CAAAC,OAAc;AAAA,UACrC,OAAOR,EAAE,cAAcQ,CAAS,IAAI,EAAE,IAAI,UAAU,cAAcA,GAAW;AAAA,UAC7E,OAAOA;AAAA,QAAA,EACP;AAAA,QACF,OAAOR,EAAE,OAAO;AAAA,QAChB,aAAaA,EAAE,kBAAkB;AAAA,QACjC,cAAcA,EAAE,mBAAmB;AAAA,QACnC,YAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAI,EAACC,GAAA,EAAe,MAAK,OAAM,OAAOL,EAAE,KAAK,GAAG,YAAU,IAAC,cAAcA,EAAE,iBAAiB,EAAA,CAAG;AAAA,EAAA,GAC7F;AAEJ;"}
|
package/dist/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.js
CHANGED
|
@@ -6,13 +6,14 @@ import { z as t } from "zod";
|
|
|
6
6
|
import { useComponentContext as L } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
7
7
|
import { Flex as i } from "../../../Common/Flex/Flex.js";
|
|
8
8
|
import { Grid as R } from "../../../Common/Grid/Grid.js";
|
|
9
|
+
import "classnames";
|
|
9
10
|
import { RadioGroupField as S } from "../../../Common/Fields/RadioGroupField/RadioGroupField.js";
|
|
10
11
|
import { ActionsLayout as T } from "../../../Common/ActionsLayout/ActionsLayout.js";
|
|
11
|
-
import { NumberInputField as
|
|
12
|
+
import { NumberInputField as c } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
|
|
12
13
|
import { Form as E } from "../../../Common/Form/Form.js";
|
|
13
14
|
import { useI18n as I } from "../../../../i18n/I18n.js";
|
|
14
15
|
import j from "../../../../hooks/useNumberFormatter.js";
|
|
15
|
-
const
|
|
16
|
+
const Y = t.object({
|
|
16
17
|
wageType: t.enum(["Hourly", "Fixed"]),
|
|
17
18
|
hours: t.number().nonnegative().max(2e4).optional(),
|
|
18
19
|
wage: t.number().nonnegative().optional(),
|
|
@@ -21,7 +22,7 @@ const X = t.object({
|
|
|
21
22
|
paymentMethod: t.enum(["Check", "Direct Deposit", "Historical Payment"]),
|
|
22
23
|
hourlyRate: t.number().nonnegative().optional(),
|
|
23
24
|
contractorUuid: t.string()
|
|
24
|
-
}),
|
|
25
|
+
}), Z = ({
|
|
25
26
|
isOpen: y,
|
|
26
27
|
onClose: u,
|
|
27
28
|
formMethods: o,
|
|
@@ -31,7 +32,7 @@ const X = t.object({
|
|
|
31
32
|
I("Contractor.Payments.CreatePayment");
|
|
32
33
|
const { t: e } = H("Contractor.Payments.CreatePayment", {
|
|
33
34
|
keyPrefix: "editContractorPayment"
|
|
34
|
-
}), { Modal: b, Button: p, Text: h, Heading: l } = L(), g = j("currency"),
|
|
35
|
+
}), { Modal: b, Button: p, Text: h, Heading: l } = L(), g = j("currency"), m = a({
|
|
35
36
|
name: "wageType",
|
|
36
37
|
control: o.control
|
|
37
38
|
}), f = a({
|
|
@@ -49,7 +50,7 @@ const X = t.object({
|
|
|
49
50
|
}), v = a({
|
|
50
51
|
name: "hourlyRate",
|
|
51
52
|
control: o.control
|
|
52
|
-
}), D = (
|
|
53
|
+
}), D = (m === "Fixed" ? 0 : C || 0) + (P || 0) + (x || 0) + (f || 0) * (v || 0), F = [
|
|
53
54
|
{ value: "Check", label: e("paymentMethods.check") },
|
|
54
55
|
{ value: "Direct Deposit", label: e("paymentMethods.directDeposit") },
|
|
55
56
|
{ value: "Historical Payment", label: e("paymentMethods.historicalPayment") }
|
|
@@ -82,10 +83,10 @@ const X = t.object({
|
|
|
82
83
|
g(D)
|
|
83
84
|
] })
|
|
84
85
|
] }),
|
|
85
|
-
|
|
86
|
+
m === "Hourly" && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
|
|
86
87
|
/* @__PURE__ */ n(l, { as: "h3", children: e("hoursSection") }),
|
|
87
88
|
/* @__PURE__ */ n(
|
|
88
|
-
|
|
89
|
+
c,
|
|
89
90
|
{
|
|
90
91
|
name: "hours",
|
|
91
92
|
isRequired: !0,
|
|
@@ -94,16 +95,16 @@ const X = t.object({
|
|
|
94
95
|
}
|
|
95
96
|
)
|
|
96
97
|
] }),
|
|
97
|
-
|
|
98
|
+
m === "Fixed" && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
|
|
98
99
|
/* @__PURE__ */ n(l, { as: "h3", children: e("fixedPaySection") }),
|
|
99
|
-
/* @__PURE__ */ n(
|
|
100
|
+
/* @__PURE__ */ n(c, { name: "wage", isRequired: !0, label: e("wageLabel"), format: "currency" })
|
|
100
101
|
] }),
|
|
101
102
|
/* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: [
|
|
102
103
|
/* @__PURE__ */ n(l, { as: "h3", children: e("additionalEarningsSection") }),
|
|
103
104
|
/* @__PURE__ */ r(R, { gridTemplateColumns: { base: "1fr", small: [200, 200] }, gap: 16, children: [
|
|
104
|
-
|
|
105
|
+
m === "Hourly" && /* @__PURE__ */ n(c, { name: "bonus", label: e("bonusLabel"), format: "currency" }),
|
|
105
106
|
/* @__PURE__ */ n(
|
|
106
|
-
|
|
107
|
+
c,
|
|
107
108
|
{
|
|
108
109
|
name: "reimbursement",
|
|
109
110
|
label: e("reimbursementLabel"),
|
|
@@ -125,7 +126,7 @@ const X = t.object({
|
|
|
125
126
|
);
|
|
126
127
|
};
|
|
127
128
|
export {
|
|
128
|
-
|
|
129
|
-
|
|
129
|
+
Y as EditContractorPaymentFormSchema,
|
|
130
|
+
Z as EditContractorPaymentPresentation
|
|
130
131
|
};
|
|
131
132
|
//# sourceMappingURL=EditContractorPaymentPresentation.js.map
|
package/dist/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditContractorPaymentPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { FormProvider, useWatch, type UseFormReturn } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ActionsLayout, Flex, Grid, NumberInputField, RadioGroupField } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { useI18n } from '@/i18n'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\nexport const EditContractorPaymentFormSchema = z.object({\n wageType: z.enum(['Hourly', 'Fixed']),\n hours: z.number().nonnegative().max(20000).optional(),\n wage: z.number().nonnegative().optional(),\n bonus: z.number().nonnegative().optional(),\n reimbursement: z.number().nonnegative().optional(),\n paymentMethod: z.enum(['Check', 'Direct Deposit', 'Historical Payment']),\n hourlyRate: z.number().nonnegative().optional(),\n contractorUuid: z.string(),\n})\n\nexport type EditContractorPaymentFormValues = z.infer<typeof EditContractorPaymentFormSchema>\n\ninterface EditContractorPaymentPresentationProps {\n isOpen: boolean\n onClose: () => void\n formMethods: UseFormReturn<EditContractorPaymentFormValues>\n onSubmit: (data: EditContractorPaymentFormValues) => void\n}\n\nexport const EditContractorPaymentPresentation = ({\n isOpen,\n onClose,\n formMethods,\n onSubmit,\n}: EditContractorPaymentPresentationProps) => {\n const formId = useId()\n useI18n('Contractor.Payments.CreatePayment')\n const { t } = useTranslation('Contractor.Payments.CreatePayment', {\n keyPrefix: 'editContractorPayment',\n })\n const { Modal, Button, Text, Heading } = useComponentContext()\n const currencyFormatter = useNumberFormatter('currency')\n\n const wageType = useWatch<EditContractorPaymentFormValues, 'wageType'>({\n name: 'wageType',\n control: formMethods.control,\n })\n const hours = useWatch<EditContractorPaymentFormValues, 'hours'>({\n name: 'hours',\n control: formMethods.control,\n })\n const wage = useWatch<EditContractorPaymentFormValues, 'wage'>({\n name: 'wage',\n control: formMethods.control,\n })\n const bonus = useWatch<EditContractorPaymentFormValues, 'bonus'>({\n name: 'bonus',\n control: formMethods.control,\n })\n const reimbursement = useWatch<EditContractorPaymentFormValues, 'reimbursement'>({\n name: 'reimbursement',\n control: formMethods.control,\n })\n const hourlyRate = useWatch<EditContractorPaymentFormValues, 'hourlyRate'>({\n name: 'hourlyRate',\n control: formMethods.control,\n })\n\n const totalAmount =\n (wageType === 'Fixed' ? 0 : bonus || 0) +\n (reimbursement || 0) +\n (wage || 0) +\n (hours || 0) * (hourlyRate || 0)\n\n const paymentMethodOptions = [\n { value: 'Check', label: t('paymentMethods.check') },\n { value: 'Direct Deposit', label: t('paymentMethods.directDeposit') },\n { value: 'Historical Payment', label: t('paymentMethods.historicalPayment') },\n ]\n\n return (\n <Modal\n isOpen={isOpen}\n onClose={onClose}\n footer={\n <ActionsLayout>\n <Button variant=\"secondary\" onClick={onClose}>\n {t('cancelCta')}\n </Button>\n <Button\n variant=\"primary\"\n type=\"submit\"\n form={formId}\n onClick={() => formMethods.handleSubmit(onSubmit)}\n >\n {t('saveCta')}\n </Button>\n </ActionsLayout>\n }\n >\n <FormProvider {...formMethods}>\n <Form id={formId} onSubmit={formMethods.handleSubmit(onSubmit)}>\n <Flex flexDirection=\"column\" gap={32}>\n <Flex flexDirection=\"column\" gap={16}>\n <Heading as=\"h2\">{t('title')}</Heading>\n <Text>{t('subtitle')}</Text>\n <Text weight=\"bold\">\n {t('totalPay')}: {currencyFormatter(totalAmount)}\n </Text>\n </Flex>\n\n {wageType === 'Hourly' && (\n <Flex flexDirection=\"column\" gap={16}>\n <Heading as=\"h3\">{t('hoursSection')}</Heading>\n <NumberInputField\n name=\"hours\"\n isRequired\n label={t('hoursLabel')}\n adornmentEnd={t('hoursAdornment')}\n />\n </Flex>\n )}\n\n {wageType === 'Fixed' && (\n <Flex flexDirection=\"column\" gap={16}>\n <Heading as=\"h3\">{t('fixedPaySection')}</Heading>\n <NumberInputField name=\"wage\" isRequired label={t('wageLabel')} format=\"currency\" />\n </Flex>\n )}\n\n <Flex flexDirection=\"column\" gap={16}>\n <Heading as=\"h3\">{t('additionalEarningsSection')}</Heading>\n <Grid gridTemplateColumns={{ base: '1fr', small: [200, 200] }} gap={16}>\n {wageType === 'Hourly' && (\n <NumberInputField name=\"bonus\" label={t('bonusLabel')} format=\"currency\" />\n )}\n <NumberInputField\n name=\"reimbursement\"\n label={t('reimbursementLabel')}\n format=\"currency\"\n />\n </Grid>\n </Flex>\n\n <Flex flexDirection=\"column\" gap={16}>\n <RadioGroupField\n name=\"paymentMethod\"\n options={paymentMethodOptions}\n label={t('paymentMethodLabel')}\n />\n </Flex>\n </Flex>\n </Form>\n </FormProvider>\n </Modal>\n )\n}\n"],"names":["EditContractorPaymentFormSchema","z","EditContractorPaymentPresentation","isOpen","onClose","formMethods","onSubmit","formId","useId","useI18n","t","useTranslation","Modal","Button","Text","Heading","useComponentContext","currencyFormatter","useNumberFormatter","wageType","useWatch","hours","wage","bonus","reimbursement","hourlyRate","totalAmount","paymentMethodOptions","jsx","ActionsLayout","FormProvider","Form","jsxs","Flex","NumberInputField","Grid","RadioGroupField"],"mappings":"
|
|
1
|
+
{"version":3,"file":"EditContractorPaymentPresentation.js","sources":["../../../../../src/components/Contractor/Payments/CreatePayment/EditContractorPaymentPresentation.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { FormProvider, useWatch, type UseFormReturn } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ActionsLayout, Flex, Grid, NumberInputField, RadioGroupField } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { useI18n } from '@/i18n'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\n\nexport const EditContractorPaymentFormSchema = z.object({\n wageType: z.enum(['Hourly', 'Fixed']),\n hours: z.number().nonnegative().max(20000).optional(),\n wage: z.number().nonnegative().optional(),\n bonus: z.number().nonnegative().optional(),\n reimbursement: z.number().nonnegative().optional(),\n paymentMethod: z.enum(['Check', 'Direct Deposit', 'Historical Payment']),\n hourlyRate: z.number().nonnegative().optional(),\n contractorUuid: z.string(),\n})\n\nexport type EditContractorPaymentFormValues = z.infer<typeof EditContractorPaymentFormSchema>\n\ninterface EditContractorPaymentPresentationProps {\n isOpen: boolean\n onClose: () => void\n formMethods: UseFormReturn<EditContractorPaymentFormValues>\n onSubmit: (data: EditContractorPaymentFormValues) => void\n}\n\nexport const EditContractorPaymentPresentation = ({\n isOpen,\n onClose,\n formMethods,\n onSubmit,\n}: EditContractorPaymentPresentationProps) => {\n const formId = useId()\n useI18n('Contractor.Payments.CreatePayment')\n const { t } = useTranslation('Contractor.Payments.CreatePayment', {\n keyPrefix: 'editContractorPayment',\n })\n const { Modal, Button, Text, Heading } = useComponentContext()\n const currencyFormatter = useNumberFormatter('currency')\n\n const wageType = useWatch<EditContractorPaymentFormValues, 'wageType'>({\n name: 'wageType',\n control: formMethods.control,\n })\n const hours = useWatch<EditContractorPaymentFormValues, 'hours'>({\n name: 'hours',\n control: formMethods.control,\n })\n const wage = useWatch<EditContractorPaymentFormValues, 'wage'>({\n name: 'wage',\n control: formMethods.control,\n })\n const bonus = useWatch<EditContractorPaymentFormValues, 'bonus'>({\n name: 'bonus',\n control: formMethods.control,\n })\n const reimbursement = useWatch<EditContractorPaymentFormValues, 'reimbursement'>({\n name: 'reimbursement',\n control: formMethods.control,\n })\n const hourlyRate = useWatch<EditContractorPaymentFormValues, 'hourlyRate'>({\n name: 'hourlyRate',\n control: formMethods.control,\n })\n\n const totalAmount =\n (wageType === 'Fixed' ? 0 : bonus || 0) +\n (reimbursement || 0) +\n (wage || 0) +\n (hours || 0) * (hourlyRate || 0)\n\n const paymentMethodOptions = [\n { value: 'Check', label: t('paymentMethods.check') },\n { value: 'Direct Deposit', label: t('paymentMethods.directDeposit') },\n { value: 'Historical Payment', label: t('paymentMethods.historicalPayment') },\n ]\n\n return (\n <Modal\n isOpen={isOpen}\n onClose={onClose}\n footer={\n <ActionsLayout>\n <Button variant=\"secondary\" onClick={onClose}>\n {t('cancelCta')}\n </Button>\n <Button\n variant=\"primary\"\n type=\"submit\"\n form={formId}\n onClick={() => formMethods.handleSubmit(onSubmit)}\n >\n {t('saveCta')}\n </Button>\n </ActionsLayout>\n }\n >\n <FormProvider {...formMethods}>\n <Form id={formId} onSubmit={formMethods.handleSubmit(onSubmit)}>\n <Flex flexDirection=\"column\" gap={32}>\n <Flex flexDirection=\"column\" gap={16}>\n <Heading as=\"h2\">{t('title')}</Heading>\n <Text>{t('subtitle')}</Text>\n <Text weight=\"bold\">\n {t('totalPay')}: {currencyFormatter(totalAmount)}\n </Text>\n </Flex>\n\n {wageType === 'Hourly' && (\n <Flex flexDirection=\"column\" gap={16}>\n <Heading as=\"h3\">{t('hoursSection')}</Heading>\n <NumberInputField\n name=\"hours\"\n isRequired\n label={t('hoursLabel')}\n adornmentEnd={t('hoursAdornment')}\n />\n </Flex>\n )}\n\n {wageType === 'Fixed' && (\n <Flex flexDirection=\"column\" gap={16}>\n <Heading as=\"h3\">{t('fixedPaySection')}</Heading>\n <NumberInputField name=\"wage\" isRequired label={t('wageLabel')} format=\"currency\" />\n </Flex>\n )}\n\n <Flex flexDirection=\"column\" gap={16}>\n <Heading as=\"h3\">{t('additionalEarningsSection')}</Heading>\n <Grid gridTemplateColumns={{ base: '1fr', small: [200, 200] }} gap={16}>\n {wageType === 'Hourly' && (\n <NumberInputField name=\"bonus\" label={t('bonusLabel')} format=\"currency\" />\n )}\n <NumberInputField\n name=\"reimbursement\"\n label={t('reimbursementLabel')}\n format=\"currency\"\n />\n </Grid>\n </Flex>\n\n <Flex flexDirection=\"column\" gap={16}>\n <RadioGroupField\n name=\"paymentMethod\"\n options={paymentMethodOptions}\n label={t('paymentMethodLabel')}\n />\n </Flex>\n </Flex>\n </Form>\n </FormProvider>\n </Modal>\n )\n}\n"],"names":["EditContractorPaymentFormSchema","z","EditContractorPaymentPresentation","isOpen","onClose","formMethods","onSubmit","formId","useId","useI18n","t","useTranslation","Modal","Button","Text","Heading","useComponentContext","currencyFormatter","useNumberFormatter","wageType","useWatch","hours","wage","bonus","reimbursement","hourlyRate","totalAmount","paymentMethodOptions","jsx","ActionsLayout","FormProvider","Form","jsxs","Flex","NumberInputField","Grid","RadioGroupField"],"mappings":";;;;;;;;;;;;;;;AAUO,MAAMA,IAAkCC,EAAE,OAAO;AAAA,EACtD,UAAUA,EAAE,KAAK,CAAC,UAAU,OAAO,CAAC;AAAA,EACpC,OAAOA,EAAE,SAAS,cAAc,IAAI,GAAK,EAAE,SAAA;AAAA,EAC3C,MAAMA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EAC/B,OAAOA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EAChC,eAAeA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EACxC,eAAeA,EAAE,KAAK,CAAC,SAAS,kBAAkB,oBAAoB,CAAC;AAAA,EACvE,YAAYA,EAAE,OAAA,EAAS,YAAA,EAAc,SAAA;AAAA,EACrC,gBAAgBA,EAAE,OAAA;AACpB,CAAC,GAWYC,IAAoC,CAAC;AAAA,EAChD,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AACF,MAA8C;AAC5C,QAAMC,IAASC,EAAA;AACf,EAAAC,EAAQ,mCAAmC;AAC3C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,qCAAqC;AAAA,IAChE,WAAW;AAAA,EAAA,CACZ,GACK,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA,GACnCC,IAAoBC,EAAmB,UAAU,GAEjDC,IAAWC,EAAsD;AAAA,IACrE,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKgB,IAAQD,EAAmD;AAAA,IAC/D,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKiB,IAAOF,EAAkD;AAAA,IAC7D,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKkB,IAAQH,EAAmD;AAAA,IAC/D,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKmB,IAAgBJ,EAA2D;AAAA,IAC/E,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GACKoB,IAAaL,EAAwD;AAAA,IACzE,MAAM;AAAA,IACN,SAASf,EAAY;AAAA,EAAA,CACtB,GAEKqB,KACHP,MAAa,UAAU,IAAII,KAAS,MACpCC,KAAiB,MACjBF,KAAQ,MACRD,KAAS,MAAMI,KAAc,IAE1BE,IAAuB;AAAA,IAC3B,EAAE,OAAO,SAAS,OAAOjB,EAAE,sBAAsB,EAAA;AAAA,IACjD,EAAE,OAAO,kBAAkB,OAAOA,EAAE,8BAA8B,EAAA;AAAA,IAClE,EAAE,OAAO,sBAAsB,OAAOA,EAAE,kCAAkC,EAAA;AAAA,EAAE;AAG9E,SACE,gBAAAkB;AAAA,IAAChB;AAAA,IAAA;AAAA,MACC,QAAAT;AAAA,MACA,SAAAC;AAAA,MACA,0BACGyB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAD,EAACf,KAAO,SAAQ,aAAY,SAAST,GAClC,UAAAM,EAAE,WAAW,GAChB;AAAA,QACA,gBAAAkB;AAAA,UAACf;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAMN;AAAA,YACN,SAAS,MAAMF,EAAY,aAAaC,CAAQ;AAAA,YAE/C,YAAE,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,GACF;AAAA,MAGF,4BAACwB,GAAA,EAAc,GAAGzB,GAChB,UAAA,gBAAAuB,EAACG,GAAA,EAAK,IAAIxB,GAAQ,UAAUF,EAAY,aAAaC,CAAQ,GAC3D,UAAA,gBAAA0B,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,OAAO,GAAE;AAAA,UAC7B,gBAAAkB,EAACd,GAAA,EAAM,UAAAJ,EAAE,UAAU,EAAA,CAAE;AAAA,UACrB,gBAAAsB,EAAClB,GAAA,EAAK,QAAO,QACV,UAAA;AAAA,YAAAJ,EAAE,UAAU;AAAA,YAAE;AAAA,YAAGO,EAAkBS,CAAW;AAAA,UAAA,EAAA,CACjD;AAAA,QAAA,GACF;AAAA,QAECP,MAAa,YACZ,gBAAAa,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,cAAc,GAAE;AAAA,UACpC,gBAAAkB;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,YAAU;AAAA,cACV,OAAOxB,EAAE,YAAY;AAAA,cACrB,cAAcA,EAAE,gBAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,QAClC,GACF;AAAA,QAGDS,MAAa,WACZ,gBAAAa,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,iBAAiB,GAAE;AAAA,UACvC,gBAAAkB,EAACM,GAAA,EAAiB,MAAK,QAAO,YAAU,IAAC,OAAOxB,EAAE,WAAW,GAAG,QAAO,WAAA,CAAW;AAAA,QAAA,GACpF;AAAA,QAGF,gBAAAsB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,UAAA,gBAAAL,EAACb,GAAA,EAAQ,IAAG,MAAM,UAAAL,EAAE,2BAA2B,GAAE;AAAA,UACjD,gBAAAsB,EAACG,GAAA,EAAK,qBAAqB,EAAE,MAAM,OAAO,OAAO,CAAC,KAAK,GAAG,EAAA,GAAK,KAAK,IACjE,UAAA;AAAA,YAAAhB,MAAa,YACZ,gBAAAS,EAACM,GAAA,EAAiB,MAAK,SAAQ,OAAOxB,EAAE,YAAY,GAAG,QAAO,WAAA,CAAW;AAAA,YAE3E,gBAAAkB;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAOxB,EAAE,oBAAoB;AAAA,gBAC7B,QAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UACT,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAkB,EAACK,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA,gBAAAL;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAST;AAAA,YACT,OAAOjB,EAAE,oBAAoB;AAAA,UAAA;AAAA,QAAA,EAC/B,CACF;AAAA,MAAA,EAAA,CACF,GACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -5,6 +5,7 @@ import { BaseComponent as a } from "../../../Base/Base.js";
|
|
|
5
5
|
import { useBase as p } from "../../../Base/useBase.js";
|
|
6
6
|
import { Grid as h } from "../../../Common/Grid/Grid.js";
|
|
7
7
|
import { Flex as C } from "../../../Common/Flex/Flex.js";
|
|
8
|
+
import "classnames";
|
|
8
9
|
import { ActionsLayout as f } from "../../../Common/ActionsLayout/ActionsLayout.js";
|
|
9
10
|
import { useComponentContext as D } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
|
|
10
11
|
import "react";
|
|
@@ -12,7 +13,7 @@ import { useComponentDictionary as E, useI18n as g } from "../../../../i18n/I18n
|
|
|
12
13
|
import { componentEvents as s } from "../../../../shared/constants.js";
|
|
13
14
|
import y from "../../../../assets/icons/coins-hand.svg.js";
|
|
14
15
|
import x from "../../../../assets/icons/plus-circle.svg.js";
|
|
15
|
-
function
|
|
16
|
+
function k(o) {
|
|
16
17
|
return /* @__PURE__ */ t(a, { ...o, children: /* @__PURE__ */ t(I, { ...o, children: o.children }) });
|
|
17
18
|
}
|
|
18
19
|
function I({ className: o, dictionary: l }) {
|
|
@@ -48,6 +49,6 @@ function I({ className: o, dictionary: l }) {
|
|
|
48
49
|
] }) });
|
|
49
50
|
}
|
|
50
51
|
export {
|
|
51
|
-
|
|
52
|
+
k as IncludeDeductions
|
|
52
53
|
};
|
|
53
54
|
//# sourceMappingURL=IncludeDeductions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IncludeDeductions.js","sources":["../../../../../src/components/Employee/Deductions/IncludeDeductions/IncludeDeductions.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport styles from './IncludeDeductions.module.scss'\nimport {\n BaseComponent,\n type BaseComponentInterface,\n type CommonComponentInterface,\n useBase,\n} from '@/components/Base'\nimport { Grid } from '@/components/Common/Grid/Grid'\nimport { ActionsLayout, Flex } from '@/components/Common'\nimport { useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport CoinsHandsIcon from '@/assets/icons/coins-hand.svg?react'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\n\ninterface IncludeDeductionsProps extends CommonComponentInterface<'Employee.Deductions'> {\n employeeId: string\n}\n\nexport function IncludeDeductions(props: IncludeDeductionsProps & BaseComponentInterface) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nfunction Root({ className, dictionary }: IncludeDeductionsProps) {\n const { onEvent } = useBase()\n const { t } = useTranslation('Employee.Deductions')\n const Components = useComponentContext()\n\n useComponentDictionary('Employee.Deductions', dictionary)\n useI18n('Employee.Deductions')\n\n const handleAdd = () => {\n onEvent(componentEvents.EMPLOYEE_DEDUCTION_INCLUDE_YES)\n }\n\n const handleContinue = () => {\n onEvent(componentEvents.EMPLOYEE_DEDUCTION_INCLUDE_NO)\n }\n\n return (\n <section className={className}>\n <Grid gridTemplateColumns=\"1fr\">\n <Components.Heading as=\"h2\">{t('pageTitle')}</Components.Heading>\n <Components.Text variant=\"supporting\">\n {t('includeDeductionsDescriptionV2')}\n </Components.Text>\n <Components.Text weight=\"bold\" size=\"lg\">\n {t('includeDeductionsSubtitle')}\n </Components.Text>\n <section className={styles.emptyStateContainer}>\n <Flex flexDirection=\"column\" gap={16} justifyContent=\"center\" alignItems=\"center\">\n <section className={styles.coinHandsIconContainer}>\n <CoinsHandsIcon width={36} height={36} />\n </section>\n <Components.Text weight=\"bold\">{t('includeDeductionsEmptyState')}</Components.Text>\n <Components.Button\n type=\"button\"\n variant=\"secondary\"\n onClick={handleAdd}\n className={styles.addDeductionButton}\n >\n <PlusCircleIcon width={24} height={24} className={styles.plusCircleIcon} />\n {t('addDeductionButtonCta')}\n </Components.Button>\n </Flex>\n </section>\n <ActionsLayout>\n <Components.Button type=\"button\" onClick={handleContinue}>\n {t('continueCta')}\n </Components.Button>\n </ActionsLayout>\n </Grid>\n </section>\n )\n}\n"],"names":["IncludeDeductions","props","jsx","BaseComponent","Root","className","dictionary","onEvent","useBase","t","useTranslation","Components","useComponentContext","useComponentDictionary","useI18n","handleAdd","componentEvents","handleContinue","jsxs","Grid","styles","Flex","CoinsHandsIcon","PlusCircleIcon","ActionsLayout"],"mappings":"
|
|
1
|
+
{"version":3,"file":"IncludeDeductions.js","sources":["../../../../../src/components/Employee/Deductions/IncludeDeductions/IncludeDeductions.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport styles from './IncludeDeductions.module.scss'\nimport {\n BaseComponent,\n type BaseComponentInterface,\n type CommonComponentInterface,\n useBase,\n} from '@/components/Base'\nimport { Grid } from '@/components/Common/Grid/Grid'\nimport { ActionsLayout, Flex } from '@/components/Common'\nimport { useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport CoinsHandsIcon from '@/assets/icons/coins-hand.svg?react'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\n\ninterface IncludeDeductionsProps extends CommonComponentInterface<'Employee.Deductions'> {\n employeeId: string\n}\n\nexport function IncludeDeductions(props: IncludeDeductionsProps & BaseComponentInterface) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nfunction Root({ className, dictionary }: IncludeDeductionsProps) {\n const { onEvent } = useBase()\n const { t } = useTranslation('Employee.Deductions')\n const Components = useComponentContext()\n\n useComponentDictionary('Employee.Deductions', dictionary)\n useI18n('Employee.Deductions')\n\n const handleAdd = () => {\n onEvent(componentEvents.EMPLOYEE_DEDUCTION_INCLUDE_YES)\n }\n\n const handleContinue = () => {\n onEvent(componentEvents.EMPLOYEE_DEDUCTION_INCLUDE_NO)\n }\n\n return (\n <section className={className}>\n <Grid gridTemplateColumns=\"1fr\">\n <Components.Heading as=\"h2\">{t('pageTitle')}</Components.Heading>\n <Components.Text variant=\"supporting\">\n {t('includeDeductionsDescriptionV2')}\n </Components.Text>\n <Components.Text weight=\"bold\" size=\"lg\">\n {t('includeDeductionsSubtitle')}\n </Components.Text>\n <section className={styles.emptyStateContainer}>\n <Flex flexDirection=\"column\" gap={16} justifyContent=\"center\" alignItems=\"center\">\n <section className={styles.coinHandsIconContainer}>\n <CoinsHandsIcon width={36} height={36} />\n </section>\n <Components.Text weight=\"bold\">{t('includeDeductionsEmptyState')}</Components.Text>\n <Components.Button\n type=\"button\"\n variant=\"secondary\"\n onClick={handleAdd}\n className={styles.addDeductionButton}\n >\n <PlusCircleIcon width={24} height={24} className={styles.plusCircleIcon} />\n {t('addDeductionButtonCta')}\n </Components.Button>\n </Flex>\n </section>\n <ActionsLayout>\n <Components.Button type=\"button\" onClick={handleContinue}>\n {t('continueCta')}\n </Components.Button>\n </ActionsLayout>\n </Grid>\n </section>\n )\n}\n"],"names":["IncludeDeductions","props","jsx","BaseComponent","Root","className","dictionary","onEvent","useBase","t","useTranslation","Components","useComponentContext","useComponentDictionary","useI18n","handleAdd","componentEvents","handleContinue","jsxs","Grid","styles","Flex","CoinsHandsIcon","PlusCircleIcon","ActionsLayout"],"mappings":";;;;;;;;;;;;;;;AAqBO,SAASA,EAAkBC,GAAwD;AACxF,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,SAASG,EAAK,EAAE,WAAAC,GAAW,YAAAC,KAAsC;AAC/D,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GACd,EAAE,GAAAC,EAAA,IAAMC,EAAe,qBAAqB,GAC5CC,IAAaC,EAAA;AAEnB,EAAAC,EAAuB,uBAAuBP,CAAU,GACxDQ,EAAQ,qBAAqB;AAE7B,QAAMC,IAAY,MAAM;AACtB,IAAAR,EAAQS,EAAgB,8BAA8B;AAAA,EACxD,GAEMC,IAAiB,MAAM;AAC3B,IAAAV,EAAQS,EAAgB,6BAA6B;AAAA,EACvD;AAEA,2BACG,WAAA,EAAQ,WAAAX,GACP,UAAA,gBAAAa,EAACC,GAAA,EAAK,qBAAoB,OACxB,UAAA;AAAA,IAAA,gBAAAjB,EAACS,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAAF,EAAE,WAAW,GAAE;AAAA,IAC5C,gBAAAP,EAACS,EAAW,MAAX,EAAgB,SAAQ,cACtB,UAAAF,EAAE,gCAAgC,GACrC;AAAA,IACA,gBAAAP,EAACS,EAAW,MAAX,EAAgB,QAAO,QAAO,MAAK,MACjC,UAAAF,EAAE,2BAA2B,EAAA,CAChC;AAAA,IACA,gBAAAP,EAAC,WAAA,EAAQ,WAAWkB,EAAO,qBACzB,UAAA,gBAAAF,EAACG,GAAA,EAAK,eAAc,UAAS,KAAK,IAAI,gBAAe,UAAS,YAAW,UACvE,UAAA;AAAA,MAAA,gBAAAnB,EAAC,WAAA,EAAQ,WAAWkB,EAAO,wBACzB,UAAA,gBAAAlB,EAACoB,KAAe,OAAO,IAAI,QAAQ,GAAA,CAAI,EAAA,CACzC;AAAA,MACA,gBAAApB,EAACS,EAAW,MAAX,EAAgB,QAAO,QAAQ,UAAAF,EAAE,6BAA6B,GAAE;AAAA,MACjE,gBAAAS;AAAA,QAACP,EAAW;AAAA,QAAX;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,SAASI;AAAA,UACT,WAAWK,EAAO;AAAA,UAElB,UAAA;AAAA,YAAA,gBAAAlB,EAACqB,KAAe,OAAO,IAAI,QAAQ,IAAI,WAAWH,EAAO,gBAAgB;AAAA,YACxEX,EAAE,uBAAuB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5B,EAAA,CACF,EAAA,CACF;AAAA,IACA,gBAAAP,EAACsB,GAAA,EACC,UAAA,gBAAAtB,EAACS,EAAW,QAAX,EAAkB,MAAK,UAAS,SAASM,GACvC,UAAAR,EAAE,aAAa,GAClB,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}
|