@gusto/embedded-react-sdk 0.19.0 → 0.21.0

package/dist/components/Employee/FederalTaxes/FederalForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"FederalForm.js","sources":["../../../../src/components/Employee/FederalTaxes/FederalForm.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { SelectField, RadioGroupField, NumberInputField } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport const FederalFormSchema = z.object({\n  filingStatus: z.string().min(1),\n  twoJobs: z.string().min(1),\n  dependentsAmount: z.number().transform(String),\n  otherIncome: z.number().transform(String),\n  deductions: z.number().transform(String),\n  extraWithholding: z.number().transform(String),\n  w4DataType: z.enum(['pre_2020_w4', 'rev_2020_w4']),\n})\n\nexport type FederalFormInputs = z.input<typeof FederalFormSchema>\nexport type FederalFormPayload = z.output<typeof FederalFormSchema>\n\nexport function FederalForm() {\n  const { t } = useTranslation('Employee.FederalTaxes')\n  const Components = useComponentContext()\n\n  const filingStatusCategories = [\n    { value: 'Single', label: t('filingStatusSingle') },\n    { value: 'Married', label: t('filingStatusMarried') },\n    { value: 'Head of Household', label: t('filingStatusHeadOfHousehold') },\n    { value: 'Exempt from withholding', label: t('filingStatusExemptFromWithholding') },\n  ]\n\n  return (\n    <>\n      <SelectField\n        name=\"filingStatus\"\n        label={t('federalFilingStatus1c')}\n        placeholder={t('federalFillingStatusPlaceholder')}\n        description={t('selectWithholdingDescription')}\n        options={filingStatusCategories}\n        isRequired\n        errorMessage={t('validations.federalFilingStatus')}\n      />\n      <RadioGroupField\n        name=\"twoJobs\"\n        isRequired\n        label={t('multipleJobs2c')}\n        errorMessage={t('validations.federalTwoJobs')}\n        description={\n          <Trans\n            i18nKey={'includesSpouseExplanation'}\n            t={t}\n            components={{\n              IrsLink: <Components.Link />,\n            }}\n          />\n        }\n        options={[\n          { value: 'true', label: t('twoJobYesLabel') },\n          { value: 'false', label: t('twoJobNoLabel') },\n        ]}\n      />\n      <NumberInputField\n        name=\"dependentsAmount\"\n        isRequired\n        label={t('dependentsTotalIfApplicable')}\n        errorMessage={t('fieldIsRequired')}\n      />\n      <NumberInputField\n        name=\"otherIncome\"\n        isRequired\n        label={t('otherIncome')}\n        format=\"currency\"\n        min={0}\n        errorMessage={t('fieldIsRequired')}\n      />\n      <NumberInputField\n        name=\"deductions\"\n        isRequired\n        label={t('deductions')}\n        format=\"currency\"\n        min={0}\n        errorMessage={t('fieldIsRequired')}\n      />\n      <NumberInputField\n        name=\"extraWithholding\"\n        isRequired\n        label={t('extraWithholding')}\n        format=\"currency\"\n        min={0}\n        errorMessage={t('fieldIsRequired')}\n      />\n    </>\n  )\n}\n"],"names":["FederalFormSchema","z","FederalForm","t","useTranslation","Components","useComponentContext","filingStatusCategories","jsxs","Fragment","jsx","SelectField","RadioGroupField","Trans","NumberInputField"],"mappings":";;;;;;;AAKO,MAAMA,IAAoBC,EAAE,OAAO;AAAA,EACxC,cAAcA,EAAE,SAAS,IAAI,CAAC;AAAA,EAC9B,SAASA,EAAE,SAAS,IAAI,CAAC;AAAA,EACzB,kBAAkBA,EAAE,SAAS,UAAU,MAAM;AAAA,EAC7C,aAAaA,EAAE,SAAS,UAAU,MAAM;AAAA,EACxC,YAAYA,EAAE,SAAS,UAAU,MAAM;AAAA,EACvC,kBAAkBA,EAAE,SAAS,UAAU,MAAM;AAAA,EAC7C,YAAYA,EAAE,KAAK,CAAC,eAAe,aAAa,CAAC;AACnD,CAAC;AAKM,SAASC,IAAc;AAC5B,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,uBAAuB,GAC9CC,IAAaC,EAAA,GAEbC,IAAyB;AAAA,IAC7B,EAAE,OAAO,UAAU,OAAOJ,EAAE,oBAAoB,EAAA;AAAA,IAChD,EAAE,OAAO,WAAW,OAAOA,EAAE,qBAAqB,EAAA;AAAA,IAClD,EAAE,OAAO,qBAAqB,OAAOA,EAAE,6BAA6B,EAAA;AAAA,IACpE,EAAE,OAAO,2BAA2B,OAAOA,EAAE,mCAAmC,EAAA;AAAA,EAAE;AAGpF,SACE,gBAAAK,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOR,EAAE,uBAAuB;AAAA,QAChC,aAAaA,EAAE,iCAAiC;AAAA,QAChD,aAAaA,EAAE,8BAA8B;AAAA,QAC7C,SAASI;AAAA,QACT,YAAU;AAAA,QACV,cAAcJ,EAAE,iCAAiC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEnD,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAOT,EAAE,gBAAgB;AAAA,QACzB,cAAcA,EAAE,4BAA4B;AAAA,QAC5C,aACE,gBAAAO;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,SAAS;AAAA,YACT,GAAAV;AAAA,YACA,YAAY;AAAA,cACV,SAAS,gBAAAO,EAACL,EAAW,MAAX,CAAA,CAAgB;AAAA,YAAA;AAAA,UAC5B;AAAA,QAAA;AAAA,QAGJ,SAAS;AAAA,UACP,EAAE,OAAO,QAAQ,OAAOF,EAAE,gBAAgB,EAAA;AAAA,UAC1C,EAAE,OAAO,SAAS,OAAOA,EAAE,eAAe,EAAA;AAAA,QAAE;AAAA,MAC9C;AAAA,IAAA;AAAA,IAEF,gBAAAO;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAOX,EAAE,6BAA6B;AAAA,QACtC,cAAcA,EAAE,iBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEnC,gBAAAO;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAOX,EAAE,aAAa;AAAA,QACtB,QAAO;AAAA,QACP,KAAK;AAAA,QACL,cAAcA,EAAE,iBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEnC,gBAAAO;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAOX,EAAE,YAAY;AAAA,QACrB,QAAO;AAAA,QACP,KAAK;AAAA,QACL,cAAcA,EAAE,iBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEnC,gBAAAO;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAOX,EAAE,kBAAkB;AAAA,QAC3B,QAAO;AAAA,QACP,KAAK;AAAA,QACL,cAAcA,EAAE,iBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC,GACF;AAEJ;"}
+{"version":3,"file":"FederalForm.js","sources":["../../../../src/components/Employee/FederalTaxes/FederalForm.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { SelectField, RadioGroupField, NumberInputField } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport const FederalFormSchema = z.object({\n  filingStatus: z.string().min(1),\n  twoJobs: z.string().min(1),\n  dependentsAmount: z.number().transform(String),\n  otherIncome: z.number().transform(String),\n  deductions: z.number().transform(String),\n  extraWithholding: z.number().transform(String),\n  w4DataType: z.enum(['pre_2020_w4', 'rev_2020_w4']),\n})\n\nexport type FederalFormInputs = z.input<typeof FederalFormSchema>\nexport type FederalFormPayload = z.output<typeof FederalFormSchema>\n\nexport function FederalForm() {\n  const { t } = useTranslation('Employee.FederalTaxes')\n  const Components = useComponentContext()\n\n  const filingStatusCategories = [\n    { value: 'Single', label: t('filingStatusSingle') },\n    { value: 'Married', label: t('filingStatusMarried') },\n    { value: 'Head of Household', label: t('filingStatusHeadOfHousehold') },\n    { value: 'Exempt from withholding', label: t('filingStatusExemptFromWithholding') },\n  ]\n\n  return (\n    <>\n      <SelectField\n        name=\"filingStatus\"\n        label={t('federalFilingStatus1c')}\n        placeholder={t('federalFillingStatusPlaceholder')}\n        description={t('selectWithholdingDescription')}\n        options={filingStatusCategories}\n        isRequired\n        errorMessage={t('validations.federalFilingStatus')}\n      />\n      <RadioGroupField\n        name=\"twoJobs\"\n        isRequired\n        label={t('multipleJobs2c')}\n        errorMessage={t('validations.federalTwoJobs')}\n        description={\n          <Trans\n            i18nKey={'includesSpouseExplanation'}\n            t={t}\n            components={{\n              IrsLink: <Components.Link />,\n            }}\n          />\n        }\n        options={[\n          { value: 'true', label: t('twoJobYesLabel') },\n          { value: 'false', label: t('twoJobNoLabel') },\n        ]}\n      />\n      <NumberInputField\n        name=\"dependentsAmount\"\n        isRequired\n        label={t('dependentsTotalIfApplicable')}\n        errorMessage={t('fieldIsRequired')}\n      />\n      <NumberInputField\n        name=\"otherIncome\"\n        isRequired\n        label={t('otherIncome')}\n        format=\"currency\"\n        min={0}\n        errorMessage={t('fieldIsRequired')}\n      />\n      <NumberInputField\n        name=\"deductions\"\n        isRequired\n        label={t('deductions')}\n        format=\"currency\"\n        min={0}\n        errorMessage={t('fieldIsRequired')}\n      />\n      <NumberInputField\n        name=\"extraWithholding\"\n        isRequired\n        label={t('extraWithholding')}\n        format=\"currency\"\n        min={0}\n        errorMessage={t('fieldIsRequired')}\n      />\n    </>\n  )\n}\n"],"names":["FederalFormSchema","z","FederalForm","t","useTranslation","Components","useComponentContext","filingStatusCategories","jsxs","Fragment","jsx","SelectField","RadioGroupField","Trans","NumberInputField"],"mappings":"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"}

package/dist/components/Employee/FederalTaxes/useFederalTaxes.js

@@ -4,16 +4,18 @@ import "react-error-boundary";
 import "react-i18next";
 import "@gusto/embedded-api/models/errors/apierror";
 import "@gusto/embedded-api/models/errors/sdkvalidationerror";
-import "@gusto/embedded-api/models/errors/unprocessableentityerrorobject";
 import "@tanstack/react-query";
 import "../../Base/useBase.js";
 import "../../../shared/constants.js";
+import "classnames";
 import "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import "dompurify";
+import "../../../contexts/LocaleProvider/useLocale.js";
 import { createCompoundContext as o } from "../../Base/createCompoundContext.js";
-const [F, T] = o("FederalTaxesContext");
+const [c, u] = o("FederalTaxesContext");
 export {
-  T as FederalTaxesProvider,
-  F as useFederalTaxes
+  u as FederalTaxesProvider,
+  c as useFederalTaxes
 };
 //# sourceMappingURL=useFederalTaxes.js.map

package/dist/components/Employee/FederalTaxes/useFederalTaxes.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFederalTaxes.js","sources":["../../../../src/components/Employee/FederalTaxes/useFederalTaxes.ts"],"sourcesContent":["import { createCompoundContext } from '@/components/Base'\n\ntype FederalTaxesContextType = {\n  isPending: boolean\n}\n\nconst [useFederalTaxes, FederalTaxesProvider] =\n  createCompoundContext<FederalTaxesContextType>('FederalTaxesContext')\nexport { useFederalTaxes, FederalTaxesProvider }\n"],"names":["useFederalTaxes","FederalTaxesProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;AAMA,MAAM,CAACA,GAAiBC,CAAoB,IAC1CC,EAA+C,qBAAqB;"}
+{"version":3,"file":"useFederalTaxes.js","sources":["../../../../src/components/Employee/FederalTaxes/useFederalTaxes.ts"],"sourcesContent":["import { createCompoundContext } from '@/components/Base'\n\ntype FederalTaxesContextType = {\n  isPending: boolean\n}\n\nconst [useFederalTaxes, FederalTaxesProvider] =\n  createCompoundContext<FederalTaxesContextType>('FederalTaxesContext')\nexport { useFederalTaxes, FederalTaxesProvider }\n"],"names":["useFederalTaxes","FederalTaxesProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;AAMA,MAAM,CAACA,GAAiBC,CAAoB,IAC1CC,EAA+C,qBAAqB;"}

package/dist/components/Employee/Landing/Landing.js

@@ -6,20 +6,22 @@ import s from "./Landing.module.scss.js";
 import { BaseComponent as x } from "../../Base/Base.js";
 import { useBase as y } from "../../Base/useBase.js";
 import { Flex as r } from "../../Common/Flex/Flex.js";
-import { ActionsLayout as E } from "../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as C } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as D, useComponentDictionary as I } from "../../../i18n/I18n.js";
-import { componentEvents as L } from "../../../shared/constants.js";
-function F(t) {
-  return D("Employee.Landing"), I("Employee.Landing", t.dictionary), /* @__PURE__ */ e(x, { ...t, children: /* @__PURE__ */ e(S, { ...t, children: t.children }) });
+import "classnames";
+import { componentEvents as E } from "../../../shared/constants.js";
+import { ActionsLayout as C } from "../../Common/ActionsLayout/ActionsLayout.js";
+import { useComponentContext as D } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "react";
+import { useI18n as I, useComponentDictionary as L } from "../../../i18n/I18n.js";
+function M(t) {
+  return I("Employee.Landing"), L("Employee.Landing", t.dictionary), /* @__PURE__ */ e(x, { ...t, children: /* @__PURE__ */ e(S, { ...t, children: t.children }) });
 }
-const S = ({ employeeId: t, companyId: c, className: m }) => {
-  const { onEvent: a } = y(), o = C(), {
+const S = ({ employeeId: t, companyId: m, className: c }) => {
+  const { onEvent: a } = y(), o = D(), {
     data: { employee: l }
   } = g({ employeeId: t }), p = l.firstName, {
     data: { company: d }
-  } = h({ companyId: c }), f = d?.name, { t: n } = u("Employee.Landing");
-  return /* @__PURE__ */ e("section", { className: m, children: /* @__PURE__ */ i(r, { alignItems: "center", flexDirection: "column", gap: 32, children: [
+  } = h({ companyId: m }), f = d?.name, { t: n } = u("Employee.Landing");
+  return /* @__PURE__ */ e("section", { className: c, children: /* @__PURE__ */ i(r, { alignItems: "center", flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ i(r, { alignItems: "center", flexDirection: "column", gap: 8, children: [
       /* @__PURE__ */ e(o.Heading, { as: "h2", textAlign: "center", children: n("landingSubtitle", { firstName: p, companyName: f }) }),
       /* @__PURE__ */ e(o.Text, { className: s.description, children: n("landingDescription") })
@@ -34,12 +36,12 @@ const S = ({ employeeId: t, companyId: c, className: m }) => {
       )
     ] }),
     /* @__PURE__ */ i(r, { flexDirection: "column", alignItems: "center", gap: 8, children: [
-      /* @__PURE__ */ e(E, { justifyContent: "center", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(C, { justifyContent: "center", children: /* @__PURE__ */ e(
         o.Button,
         {
           variant: "secondary",
           onClick: () => {
-            a(L.EMPLOYEE_SELF_ONBOARDING_START);
+            a(E.EMPLOYEE_SELF_ONBOARDING_START);
           },
           children: n("getStartedCta")
         }
@@ -49,6 +51,6 @@ const S = ({ employeeId: t, companyId: c, className: m }) => {
   ] }) });
 };
 export {
-  F as Landing
+  M as Landing
 };
 //# sourceMappingURL=Landing.js.map

package/dist/components/Employee/Landing/Landing.js.map

@@ -1 +1 @@
-{"version":3,"file":"Landing.js","sources":["../../../../src/components/Employee/Landing/Landing.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport { useCompaniesGetSuspense } from '@gusto/embedded-api/react-query/companiesGet'\nimport styles from './Landing.module.scss'\nimport {\n  BaseComponent,\n  useBase,\n  type BaseComponentInterface,\n  type CommonComponentInterface,\n} from '@/components/Base'\nimport { Flex, ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\nimport { useComponentDictionary } from '@/i18n/I18n'\n\ninterface SummaryProps extends CommonComponentInterface<'Employee.Landing'> {\n  employeeId: string\n  companyId: string\n}\n\nexport function Landing(props: SummaryProps & BaseComponentInterface) {\n  useI18n('Employee.Landing')\n  useComponentDictionary('Employee.Landing', props.dictionary)\n\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ employeeId, companyId, className }: SummaryProps) => {\n  const { onEvent } = useBase()\n  const Components = useComponentContext()\n\n  const {\n    data: { employee },\n  } = useEmployeesGetSuspense({ employeeId })\n  const firstName = employee!.firstName\n\n  const {\n    data: { company },\n  } = useCompaniesGetSuspense({ companyId })\n  const companyName = company?.name\n\n  const { t } = useTranslation('Employee.Landing')\n\n  return (\n    <section className={className}>\n      <Flex alignItems=\"center\" flexDirection=\"column\" gap={32}>\n        <Flex alignItems=\"center\" flexDirection=\"column\" gap={8}>\n          <Components.Heading as=\"h2\" textAlign=\"center\">\n            {t('landingSubtitle', { firstName, companyName })}\n          </Components.Heading>\n          <Components.Text className={styles.description}>\n            {t('landingDescription')}\n          </Components.Text>\n        </Flex>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Components.Heading as=\"h3\">{t('stepsSubtitle')}</Components.Heading>\n          <Components.UnorderedList\n            items={[t('steps.personalInfo'), t('steps.taxInfo'), t('steps.bankInfo')]}\n          />\n        </Flex>\n        <Flex flexDirection=\"column\" alignItems=\"center\" gap={8}>\n          <ActionsLayout justifyContent=\"center\">\n            <Components.Button\n              variant=\"secondary\"\n              onClick={() => {\n                onEvent(componentEvents.EMPLOYEE_SELF_ONBOARDING_START)\n              }}\n            >\n              {t('getStartedCta')}\n            </Components.Button>\n          </ActionsLayout>\n          <Components.Text className={styles.description}>\n            {t('getStartedDescription')}\n          </Components.Text>\n        </Flex>\n      </Flex>\n    </section>\n  )\n}\n"],"names":["Landing","props","useI18n","useComponentDictionary","jsx","BaseComponent","Root","employeeId","companyId","className","onEvent","useBase","Components","useComponentContext","employee","useEmployeesGetSuspense","firstName","company","useCompaniesGetSuspense","companyName","t","useTranslation","jsxs","Flex","styles","ActionsLayout","componentEvents"],"mappings":";;;;;;;;;;;;AAqBO,SAASA,EAAQC,GAA8C;AACpE,SAAAC,EAAQ,kBAAkB,GAC1BC,EAAuB,oBAAoBF,EAAM,UAAU,GAGzD,gBAAAG,EAACC,GAAA,EAAe,GAAGJ,GACjB,UAAA,gBAAAG,EAACE,KAAM,GAAGL,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMK,IAAO,CAAC,EAAE,YAAAC,GAAY,WAAAC,GAAW,WAAAC,QAA8B;AACnE,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GACdC,IAAaC,EAAA,GAEb;AAAA,IACJ,MAAM,EAAE,UAAAC,EAAA;AAAA,EAAS,IACfC,EAAwB,EAAE,YAAAR,GAAY,GACpCS,IAAYF,EAAU,WAEtB;AAAA,IACJ,MAAM,EAAE,SAAAG,EAAA;AAAA,EAAQ,IACdC,EAAwB,EAAE,WAAAV,GAAW,GACnCW,IAAcF,GAAS,MAEvB,EAAE,GAAAG,EAAA,IAAMC,EAAe,kBAAkB;AAE/C,SACE,gBAAAjB,EAAC,WAAA,EAAQ,WAAAK,GACP,UAAA,gBAAAa,EAACC,GAAA,EAAK,YAAW,UAAS,eAAc,UAAS,KAAK,IACpD,UAAA;AAAA,IAAA,gBAAAD,EAACC,KAAK,YAAW,UAAS,eAAc,UAAS,KAAK,GACpD,UAAA;AAAA,MAAA,gBAAAnB,EAACQ,EAAW,SAAX,EAAmB,IAAG,MAAK,WAAU,UACnC,UAAAQ,EAAE,mBAAmB,EAAE,WAAAJ,GAAW,aAAAG,EAAA,CAAa,EAAA,CAClD;AAAA,MACA,gBAAAf,EAACQ,EAAW,MAAX,EAAgB,WAAWY,EAAO,aAChC,UAAAJ,EAAE,oBAAoB,EAAA,CACzB;AAAA,IAAA,GACF;AAAA,IACA,gBAAAE,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAnB,EAACQ,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAAQ,EAAE,eAAe,GAAE;AAAA,MAChD,gBAAAhB;AAAA,QAACQ,EAAW;AAAA,QAAX;AAAA,UACC,OAAO,CAACQ,EAAE,oBAAoB,GAAGA,EAAE,eAAe,GAAGA,EAAE,gBAAgB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1E,GACF;AAAA,sBACCG,GAAA,EAAK,eAAc,UAAS,YAAW,UAAS,KAAK,GACpD,UAAA;AAAA,MAAA,gBAAAnB,EAACqB,GAAA,EAAc,gBAAe,UAC5B,UAAA,gBAAArB;AAAA,QAACQ,EAAW;AAAA,QAAX;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM;AACb,YAAAF,EAAQgB,EAAgB,8BAA8B;AAAA,UACxD;AAAA,UAEC,YAAE,eAAe;AAAA,QAAA;AAAA,MAAA,GAEtB;AAAA,MACA,gBAAAtB,EAACQ,EAAW,MAAX,EAAgB,WAAWY,EAAO,aAChC,UAAAJ,EAAE,uBAAuB,EAAA,CAC5B;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"Landing.js","sources":["../../../../src/components/Employee/Landing/Landing.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport { useCompaniesGetSuspense } from '@gusto/embedded-api/react-query/companiesGet'\nimport styles from './Landing.module.scss'\nimport {\n  BaseComponent,\n  useBase,\n  type BaseComponentInterface,\n  type CommonComponentInterface,\n} from '@/components/Base'\nimport { Flex, ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\nimport { useComponentDictionary } from '@/i18n/I18n'\n\ninterface SummaryProps extends CommonComponentInterface<'Employee.Landing'> {\n  employeeId: string\n  companyId: string\n}\n\nexport function Landing(props: SummaryProps & BaseComponentInterface) {\n  useI18n('Employee.Landing')\n  useComponentDictionary('Employee.Landing', props.dictionary)\n\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ employeeId, companyId, className }: SummaryProps) => {\n  const { onEvent } = useBase()\n  const Components = useComponentContext()\n\n  const {\n    data: { employee },\n  } = useEmployeesGetSuspense({ employeeId })\n  const firstName = employee!.firstName\n\n  const {\n    data: { company },\n  } = useCompaniesGetSuspense({ companyId })\n  const companyName = company?.name\n\n  const { t } = useTranslation('Employee.Landing')\n\n  return (\n    <section className={className}>\n      <Flex alignItems=\"center\" flexDirection=\"column\" gap={32}>\n        <Flex alignItems=\"center\" flexDirection=\"column\" gap={8}>\n          <Components.Heading as=\"h2\" textAlign=\"center\">\n            {t('landingSubtitle', { firstName, companyName })}\n          </Components.Heading>\n          <Components.Text className={styles.description}>\n            {t('landingDescription')}\n          </Components.Text>\n        </Flex>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Components.Heading as=\"h3\">{t('stepsSubtitle')}</Components.Heading>\n          <Components.UnorderedList\n            items={[t('steps.personalInfo'), t('steps.taxInfo'), t('steps.bankInfo')]}\n          />\n        </Flex>\n        <Flex flexDirection=\"column\" alignItems=\"center\" gap={8}>\n          <ActionsLayout justifyContent=\"center\">\n            <Components.Button\n              variant=\"secondary\"\n              onClick={() => {\n                onEvent(componentEvents.EMPLOYEE_SELF_ONBOARDING_START)\n              }}\n            >\n              {t('getStartedCta')}\n            </Components.Button>\n          </ActionsLayout>\n          <Components.Text className={styles.description}>\n            {t('getStartedDescription')}\n          </Components.Text>\n        </Flex>\n      </Flex>\n    </section>\n  )\n}\n"],"names":["Landing","props","useI18n","useComponentDictionary","jsx","BaseComponent","Root","employeeId","companyId","className","onEvent","useBase","Components","useComponentContext","employee","useEmployeesGetSuspense","firstName","company","useCompaniesGetSuspense","companyName","t","useTranslation","jsxs","Flex","styles","ActionsLayout","componentEvents"],"mappings":";;;;;;;;;;;;;;AAqBO,SAASA,EAAQC,GAA8C;AACpE,SAAAC,EAAQ,kBAAkB,GAC1BC,EAAuB,oBAAoBF,EAAM,UAAU,GAGzD,gBAAAG,EAACC,GAAA,EAAe,GAAGJ,GACjB,UAAA,gBAAAG,EAACE,KAAM,GAAGL,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMK,IAAO,CAAC,EAAE,YAAAC,GAAY,WAAAC,GAAW,WAAAC,QAA8B;AACnE,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GACdC,IAAaC,EAAA,GAEb;AAAA,IACJ,MAAM,EAAE,UAAAC,EAAA;AAAA,EAAS,IACfC,EAAwB,EAAE,YAAAR,GAAY,GACpCS,IAAYF,EAAU,WAEtB;AAAA,IACJ,MAAM,EAAE,SAAAG,EAAA;AAAA,EAAQ,IACdC,EAAwB,EAAE,WAAAV,GAAW,GACnCW,IAAcF,GAAS,MAEvB,EAAE,GAAAG,EAAA,IAAMC,EAAe,kBAAkB;AAE/C,SACE,gBAAAjB,EAAC,WAAA,EAAQ,WAAAK,GACP,UAAA,gBAAAa,EAACC,GAAA,EAAK,YAAW,UAAS,eAAc,UAAS,KAAK,IACpD,UAAA;AAAA,IAAA,gBAAAD,EAACC,KAAK,YAAW,UAAS,eAAc,UAAS,KAAK,GACpD,UAAA;AAAA,MAAA,gBAAAnB,EAACQ,EAAW,SAAX,EAAmB,IAAG,MAAK,WAAU,UACnC,UAAAQ,EAAE,mBAAmB,EAAE,WAAAJ,GAAW,aAAAG,EAAA,CAAa,EAAA,CAClD;AAAA,MACA,gBAAAf,EAACQ,EAAW,MAAX,EAAgB,WAAWY,EAAO,aAChC,UAAAJ,EAAE,oBAAoB,EAAA,CACzB;AAAA,IAAA,GACF;AAAA,IACA,gBAAAE,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAnB,EAACQ,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAAQ,EAAE,eAAe,GAAE;AAAA,MAChD,gBAAAhB;AAAA,QAACQ,EAAW;AAAA,QAAX;AAAA,UACC,OAAO,CAACQ,EAAE,oBAAoB,GAAGA,EAAE,eAAe,GAAGA,EAAE,gBAAgB,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1E,GACF;AAAA,sBACCG,GAAA,EAAK,eAAc,UAAS,YAAW,UAAS,KAAK,GACpD,UAAA;AAAA,MAAA,gBAAAnB,EAACqB,GAAA,EAAc,gBAAe,UAC5B,UAAA,gBAAArB;AAAA,QAACQ,EAAW;AAAA,QAAX;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM;AACb,YAAAF,EAAQgB,EAAgB,8BAA8B;AAAA,UACxD;AAAA,UAEC,YAAE,eAAe;AAAA,QAAA;AAAA,MAAA,GAEtB;AAAA,MACA,gBAAAtB,EAACQ,EAAW,MAAX,EAAgB,WAAWY,EAAO,aAChC,UAAAJ,EAAE,uBAAuB,EAAA,CAC5B;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/components/Employee/OnboardingSummary/OnboardingSummary.js

@@ -9,10 +9,10 @@ import r from "./OnboardingSummary.module.scss.js";
 import { BaseComponent as P } from "../../Base/Base.js";
 import { useBase as R } from "../../Base/useBase.js";
 import { Flex as d } from "../../Common/Flex/Flex.js";
-import { ActionsLayout as E } from "../../Common/ActionsLayout/ActionsLayout.js";
+import { componentEvents as E, EmployeeOnboardingStatus as N } from "../../../shared/constants.js";
+import { ActionsLayout as O } from "../../Common/ActionsLayout/ActionsLayout.js";
 import { useComponentContext as T } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as _, useComponentDictionary as w } from "../../../i18n/I18n.js";
-import { componentEvents as N, EmployeeOnboardingStatus as O } from "../../../shared/constants.js";
 import F from "../../../assets/icons/success_check.svg.js";
 import G from "../../../assets/icons/unchecked_circular.svg.js";
 import { useFlow as M } from "../../Flow/useFlow.js";
@@ -22,7 +22,7 @@ function j(n) {
 const k = ({ employeeId: n, className: c, isAdmin: m = !1 }) => {
   const { onEvent: a } = R(), { t } = b("Employee.OnboardingSummary"), o = T(), {
     data: { employee: x }
-  } = B({ employeeId: n }), { firstName: u, lastName: p } = x, { data: C } = L({ employeeId: n }), { onboardingStatus: h, onboardingSteps: l } = C.employeeOnboardingStatus, I = l?.length && l.findIndex((i) => i.required && !i.completed) > -1, f = h === O.ONBOARDING_COMPLETED || !I && h === O.SELF_ONBOARDING_PENDING_INVITE, D = S(() => y.sanitize(u), [u]), v = S(() => y.sanitize(p), [p]);
+  } = B({ employeeId: n }), { firstName: u, lastName: p } = x, { data: C } = L({ employeeId: n }), { onboardingStatus: h, onboardingSteps: l } = C.employeeOnboardingStatus, I = l?.length && l.findIndex((i) => i.required && !i.completed) > -1, f = h === N.ONBOARDING_COMPLETED || !I && h === N.SELF_ONBOARDING_PENDING_INVITE, D = S(() => y.sanitize(u), [u]), v = S(() => y.sanitize(p), [p]);
   return /* @__PURE__ */ e("section", { className: c, children: /* @__PURE__ */ s(d, { flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ e(d, { alignItems: "center", flexDirection: "column", gap: 8, children: m ? f ? /* @__PURE__ */ s(g, { children: [
       /* @__PURE__ */ e(o.Heading, { as: "h2", textAlign: "center", children: t("onboardedAdminSubtitle", {
@@ -47,23 +47,23 @@ const k = ({ employeeId: n, className: c, isAdmin: m = !1 }) => {
     ] }) : /* @__PURE__ */ s(g, { children: [
       /* @__PURE__ */ e(o.Heading, { as: "h2", textAlign: "center", children: t("onboardedSelfSubtitle") }),
       /* @__PURE__ */ e(o.Text, { className: r.description, children: t("onboardedSelfDescription") }),
-      /* @__PURE__ */ e(E, { justifyContent: f ? "center" : "start", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(O, { justifyContent: f ? "center" : "start", children: /* @__PURE__ */ e(
         o.Button,
         {
           variant: "secondary",
           onClick: () => {
-            a(N.EMPLOYEE_ONBOARDING_DONE);
+            a(E.EMPLOYEE_ONBOARDING_DONE);
           },
           children: t("doneCta")
         }
       ) })
     ] }) }),
-    m && /* @__PURE__ */ e(E, { justifyContent: "center", children: /* @__PURE__ */ e(
+    m && /* @__PURE__ */ e(O, { justifyContent: "center", children: /* @__PURE__ */ e(
       o.Button,
       {
         variant: "secondary",
         onClick: () => {
-          a(N.EMPLOYEES_LIST);
+          a(E.EMPLOYEES_LIST);
         },
         children: t("doneCta")
       }

package/dist/components/Employee/PaymentMethod/Actions.js

@@ -1,18 +1,21 @@
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useTranslation as l } from "react-i18next";
-import { usePaymentMethod as m } from "./usePaymentMethod.js";
+import { useTranslation as m } from "react-i18next";
+import { usePaymentMethod as l } from "./usePaymentMethod.js";
+import "../../../shared/constants.js";
+import "classnames";
 import { ActionsLayout as p } from "../../Common/ActionsLayout/ActionsLayout.js";
 import { useComponentContext as u } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-const L = () => {
-  const { handleAdd: a, handleCancel: i, isPending: r, bankAccounts: s, handleSplit: c, mode: t } = m(), { t: n } = l("Employee.PaymentMethod"), o = u();
+import "react";
+const S = () => {
+  const { handleAdd: i, handleCancel: r, isPending: a, bankAccounts: s, handleSplit: c, mode: t } = l(), { t: n } = m("Employee.PaymentMethod"), o = u();
   return /* @__PURE__ */ d(p, { children: [
-    (t === "ADD" || t === "SPLIT") && /* @__PURE__ */ e(o.Button, { variant: "secondary", type: "button", onClick: i, children: n("cancelAddCta") }),
+    (t === "ADD" || t === "SPLIT") && /* @__PURE__ */ e(o.Button, { variant: "secondary", type: "button", onClick: r, children: n("cancelAddCta") }),
     t === "LIST" && s.length > 1 && /* @__PURE__ */ e(o.Button, { variant: "secondary", type: "button", onClick: c, children: n("splitCta") }),
-    t === "LIST" && /* @__PURE__ */ e(o.Button, { variant: "secondary", type: "button", onClick: a, children: n("addAnotherCta") }),
-    /* @__PURE__ */ e(o.Button, { type: "submit", isLoading: r, children: n(t === "ADD" || t === "SPLIT" ? "saveCta" : "submitCta") })
+    t === "LIST" && /* @__PURE__ */ e(o.Button, { variant: "secondary", type: "button", onClick: i, children: n("addAnotherCta") }),
+    /* @__PURE__ */ e(o.Button, { type: "submit", isLoading: a, children: n(t === "ADD" || t === "SPLIT" ? "saveCta" : "submitCta") })
   ] });
 };
 export {
-  L as Actions
+  S as Actions
 };
 //# sourceMappingURL=Actions.js.map

package/dist/components/Employee/PaymentMethod/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["../../../../src/components/Employee/PaymentMethod/Actions.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { usePaymentMethod } from './usePaymentMethod'\nimport { ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport const Actions = () => {\n  const { handleAdd, handleCancel, isPending, bankAccounts, handleSplit, mode } = usePaymentMethod()\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\n\n  return (\n    <ActionsLayout>\n      {(mode === 'ADD' || mode === 'SPLIT') && (\n        <Components.Button variant=\"secondary\" type=\"button\" onClick={handleCancel}>\n          {t('cancelAddCta')}\n        </Components.Button>\n      )}\n      {mode === 'LIST' && bankAccounts.length > 1 && (\n        <Components.Button variant=\"secondary\" type=\"button\" onClick={handleSplit}>\n          {t('splitCta')}\n        </Components.Button>\n      )}\n      {mode === 'LIST' && (\n        <Components.Button variant=\"secondary\" type=\"button\" onClick={handleAdd}>\n          {t('addAnotherCta')}\n        </Components.Button>\n      )}\n      <Components.Button type=\"submit\" isLoading={isPending}>\n        {t(mode === 'ADD' || mode === 'SPLIT' ? 'saveCta' : 'submitCta')}\n      </Components.Button>\n    </ActionsLayout>\n  )\n}\n"],"names":["Actions","handleAdd","handleCancel","isPending","bankAccounts","handleSplit","mode","usePaymentMethod","t","useTranslation","Components","useComponentContext","ActionsLayout","jsx"],"mappings":";;;;;AAKO,MAAMA,IAAU,MAAM;AAC3B,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,WAAAC,GAAW,cAAAC,GAAc,aAAAC,GAAa,MAAAC,EAAA,IAASC,EAAA,GAC1E,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/CC,IAAaC,EAAA;AAEnB,2BACGC,GAAA,EACG,UAAA;AAAA,KAAAN,MAAS,SAASA,MAAS,YAC3B,gBAAAO,EAACH,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASR,GAC3D,UAAAM,EAAE,cAAc,GACnB;AAAA,IAEDF,MAAS,UAAUF,EAAa,SAAS,uBACvCM,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASL,GAC3D,UAAAG,EAAE,UAAU,GACf;AAAA,IAEDF,MAAS,UACR,gBAAAO,EAACH,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAAST,GAC3D,UAAAO,EAAE,eAAe,GACpB;AAAA,IAEF,gBAAAK,EAACH,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAWP,GACzC,UAAAK,EAAEF,MAAS,SAASA,MAAS,UAAU,YAAY,WAAW,EAAA,CACjE;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Actions.js","sources":["../../../../src/components/Employee/PaymentMethod/Actions.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { usePaymentMethod } from './usePaymentMethod'\nimport { ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport const Actions = () => {\n  const { handleAdd, handleCancel, isPending, bankAccounts, handleSplit, mode } = usePaymentMethod()\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\n\n  return (\n    <ActionsLayout>\n      {(mode === 'ADD' || mode === 'SPLIT') && (\n        <Components.Button variant=\"secondary\" type=\"button\" onClick={handleCancel}>\n          {t('cancelAddCta')}\n        </Components.Button>\n      )}\n      {mode === 'LIST' && bankAccounts.length > 1 && (\n        <Components.Button variant=\"secondary\" type=\"button\" onClick={handleSplit}>\n          {t('splitCta')}\n        </Components.Button>\n      )}\n      {mode === 'LIST' && (\n        <Components.Button variant=\"secondary\" type=\"button\" onClick={handleAdd}>\n          {t('addAnotherCta')}\n        </Components.Button>\n      )}\n      <Components.Button type=\"submit\" isLoading={isPending}>\n        {t(mode === 'ADD' || mode === 'SPLIT' ? 'saveCta' : 'submitCta')}\n      </Components.Button>\n    </ActionsLayout>\n  )\n}\n"],"names":["Actions","handleAdd","handleCancel","isPending","bankAccounts","handleSplit","mode","usePaymentMethod","t","useTranslation","Components","useComponentContext","ActionsLayout","jsx"],"mappings":";;;;;;;;AAKO,MAAMA,IAAU,MAAM;AAC3B,QAAM,EAAE,WAAAC,GAAW,cAAAC,GAAc,WAAAC,GAAW,cAAAC,GAAc,aAAAC,GAAa,MAAAC,EAAA,IAASC,EAAA,GAC1E,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/CC,IAAaC,EAAA;AAEnB,2BACGC,GAAA,EACG,UAAA;AAAA,KAAAN,MAAS,SAASA,MAAS,YAC3B,gBAAAO,EAACH,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASR,GAC3D,UAAAM,EAAE,cAAc,GACnB;AAAA,IAEDF,MAAS,UAAUF,EAAa,SAAS,uBACvCM,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASL,GAC3D,UAAAG,EAAE,UAAU,GACf;AAAA,IAEDF,MAAS,UACR,gBAAAO,EAACH,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAAST,GAC3D,UAAAO,EAAE,eAAe,GACpB;AAAA,IAEF,gBAAAK,EAACH,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAWP,GACzC,UAAAK,EAAEF,MAAS,SAASA,MAAS,UAAU,YAAY,WAAW,EAAA,CACjE;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/Employee/PaymentMethod/BankAccountEdit.js

@@ -3,11 +3,14 @@ import { useFormContext as m } from "react-hook-form";
 import { useTranslation as s } from "react-i18next";
 import { usePaymentMethod as c } from "./usePaymentMethod.js";
 import { PAYMENT_METHODS as l } from "../../../shared/constants.js";
-import { TextInputField as o } from "../../Common/Fields/TextInputField/TextInputField.js";
+import "classnames";
 import { RadioGroupField as p } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
-const h = () => {
-  const { mode: a, watchedType: t } = c(), { t: e } = s("Employee.PaymentMethod"), { setValue: n } = m();
-  if (!(a !== "ADD" && a !== "INITIAL" || t === l.check))
+import { TextInputField as o } from "../../Common/Fields/TextInputField/TextInputField.js";
+import "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "react";
+const k = () => {
+  const { mode: t, watchedType: a } = c(), { t: e } = s("Employee.PaymentMethod"), { setValue: n } = m();
+  if (!(t !== "ADD" && t !== "INITIAL" || a === l.check))
     return n("hasBankPayload", !0), /* @__PURE__ */ i(u, { children: [
       /* @__PURE__ */ r(
         o,
@@ -52,6 +55,6 @@ const h = () => {
     ] });
 };
 export {
-  h as BankAccountForm
+  k as BankAccountForm
 };
 //# sourceMappingURL=BankAccountEdit.js.map

package/dist/components/Employee/PaymentMethod/BankAccountEdit.js.map

@@ -1 +1 @@
-{"version":3,"file":"BankAccountEdit.js","sources":["../../../../src/components/Employee/PaymentMethod/BankAccountEdit.tsx"],"sourcesContent":["import { useFormContext } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport type { BankAccountInputs } from './BankAccount'\nimport { usePaymentMethod } from './usePaymentMethod'\nimport { RadioGroupField, TextInputField } from '@/components/Common'\nimport { PAYMENT_METHODS } from '@/shared/constants'\n\nexport const BankAccountForm = () => {\n  const { mode, watchedType } = usePaymentMethod()\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const { setValue } = useFormContext<BankAccountInputs>()\n\n  if ((mode !== 'ADD' && mode !== 'INITIAL') || watchedType === PAYMENT_METHODS.check) {\n    return\n  }\n  //Used by form schema to determine variant\n  setValue('hasBankPayload', true)\n\n  return (\n    <>\n      <TextInputField\n        name=\"name\"\n        isRequired\n        label={t('nameLabel')}\n        errorMessage={t('validations.accountName')}\n      />\n\n      <TextInputField\n        name=\"routingNumber\"\n        label={t('routingNumberLabel')}\n        isRequired\n        description={t('routingNumberDescription')}\n        errorMessage={t('validations.routingNumber')}\n      />\n\n      <TextInputField\n        name=\"accountNumber\"\n        label={t('accountNumberLabel')}\n        errorMessage={t('validations.accountNumber')}\n        isRequired\n      />\n\n      <RadioGroupField\n        name=\"accountType\"\n        isRequired\n        label={t('accountTypeLabel')}\n        options={[\n          { value: 'Checking', label: t('accountTypeChecking') },\n          { value: 'Savings', label: t('accountTypeSavings') },\n        ]}\n      />\n    </>\n  )\n}\n"],"names":["BankAccountForm","mode","watchedType","usePaymentMethod","t","useTranslation","setValue","useFormContext","PAYMENT_METHODS","jsxs","Fragment","jsx","TextInputField","RadioGroupField"],"mappings":";;;;;;;AAOO,MAAMA,IAAkB,MAAM;AACnC,QAAM,EAAE,MAAAC,GAAM,aAAAC,EAAA,IAAgBC,EAAA,GACxB,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,UAAAC,EAAA,IAAaC,EAAA;AAErB,MAAK,EAAAN,MAAS,SAASA,MAAS,aAAcC,MAAgBM,EAAgB;AAI9E,WAAAF,EAAS,kBAAkB,EAAI,GAG7B,gBAAAG,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,YAAU;AAAA,UACV,OAAOR,EAAE,WAAW;AAAA,UACpB,cAAcA,EAAE,yBAAyB;AAAA,QAAA;AAAA,MAAA;AAAA,MAG3C,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOR,EAAE,oBAAoB;AAAA,UAC7B,YAAU;AAAA,UACV,aAAaA,EAAE,0BAA0B;AAAA,UACzC,cAAcA,EAAE,2BAA2B;AAAA,QAAA;AAAA,MAAA;AAAA,MAG7C,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOR,EAAE,oBAAoB;AAAA,UAC7B,cAAcA,EAAE,2BAA2B;AAAA,UAC3C,YAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGZ,gBAAAO;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,YAAU;AAAA,UACV,OAAOT,EAAE,kBAAkB;AAAA,UAC3B,SAAS;AAAA,YACP,EAAE,OAAO,YAAY,OAAOA,EAAE,qBAAqB,EAAA;AAAA,YACnD,EAAE,OAAO,WAAW,OAAOA,EAAE,oBAAoB,EAAA;AAAA,UAAE;AAAA,QACrD;AAAA,MAAA;AAAA,IACF,GACF;AAEJ;"}
+{"version":3,"file":"BankAccountEdit.js","sources":["../../../../src/components/Employee/PaymentMethod/BankAccountEdit.tsx"],"sourcesContent":["import { useFormContext } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport type { BankAccountInputs } from './BankAccount'\nimport { usePaymentMethod } from './usePaymentMethod'\nimport { RadioGroupField, TextInputField } from '@/components/Common'\nimport { PAYMENT_METHODS } from '@/shared/constants'\n\nexport const BankAccountForm = () => {\n  const { mode, watchedType } = usePaymentMethod()\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const { setValue } = useFormContext<BankAccountInputs>()\n\n  if ((mode !== 'ADD' && mode !== 'INITIAL') || watchedType === PAYMENT_METHODS.check) {\n    return\n  }\n  //Used by form schema to determine variant\n  setValue('hasBankPayload', true)\n\n  return (\n    <>\n      <TextInputField\n        name=\"name\"\n        isRequired\n        label={t('nameLabel')}\n        errorMessage={t('validations.accountName')}\n      />\n\n      <TextInputField\n        name=\"routingNumber\"\n        label={t('routingNumberLabel')}\n        isRequired\n        description={t('routingNumberDescription')}\n        errorMessage={t('validations.routingNumber')}\n      />\n\n      <TextInputField\n        name=\"accountNumber\"\n        label={t('accountNumberLabel')}\n        errorMessage={t('validations.accountNumber')}\n        isRequired\n      />\n\n      <RadioGroupField\n        name=\"accountType\"\n        isRequired\n        label={t('accountTypeLabel')}\n        options={[\n          { value: 'Checking', label: t('accountTypeChecking') },\n          { value: 'Savings', label: t('accountTypeSavings') },\n        ]}\n      />\n    </>\n  )\n}\n"],"names":["BankAccountForm","mode","watchedType","usePaymentMethod","t","useTranslation","setValue","useFormContext","PAYMENT_METHODS","jsxs","Fragment","jsx","TextInputField","RadioGroupField"],"mappings":";;;;;;;;;;AAOO,MAAMA,IAAkB,MAAM;AACnC,QAAM,EAAE,MAAAC,GAAM,aAAAC,EAAA,IAAgBC,EAAA,GACxB,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,UAAAC,EAAA,IAAaC,EAAA;AAErB,MAAK,EAAAN,MAAS,SAASA,MAAS,aAAcC,MAAgBM,EAAgB;AAI9E,WAAAF,EAAS,kBAAkB,EAAI,GAG7B,gBAAAG,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,YAAU;AAAA,UACV,OAAOR,EAAE,WAAW;AAAA,UACpB,cAAcA,EAAE,yBAAyB;AAAA,QAAA;AAAA,MAAA;AAAA,MAG3C,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOR,EAAE,oBAAoB;AAAA,UAC7B,YAAU;AAAA,UACV,aAAaA,EAAE,0BAA0B;AAAA,UACzC,cAAcA,EAAE,2BAA2B;AAAA,QAAA;AAAA,MAAA;AAAA,MAG7C,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOR,EAAE,oBAAoB;AAAA,UAC7B,cAAcA,EAAE,2BAA2B;AAAA,UAC3C,YAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGZ,gBAAAO;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,YAAU;AAAA,UACV,OAAOT,EAAE,kBAAkB;AAAA,UAC3B,SAAS;AAAA,YACP,EAAE,OAAO,YAAY,OAAOA,EAAE,qBAAqB,EAAA;AAAA,YACnD,EAAE,OAAO,WAAW,OAAOA,EAAE,oBAAoB,EAAA;AAAA,UAAE;AAAA,QACrD;AAAA,MAAA;AAAA,IACF,GACF;AAEJ;"}

package/dist/components/Employee/PaymentMethod/BankAccountsList.js

@@ -1,13 +1,15 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { useTranslation as s } from "react-i18next";
 import { usePaymentMethod as p } from "./usePaymentMethod.js";
 import d from "../../../assets/icons/trashcan.svg.js";
-import f from "../../../hooks/useNumberFormatter.js";
-import { HamburgerMenu as y } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import "../../../shared/constants.js";
+import "classnames";
+import { HamburgerMenu as f } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import y from "../../../hooks/useNumberFormatter.js";
 import { useDataView as b } from "../../Common/DataView/useDataView.js";
 import { DataView as k } from "../../Common/DataView/DataView.js";
-function w() {
-  const { bankAccounts: r, paymentMethod: o, mode: i, handleDelete: m, isPending: u } = p(), { t } = s("Employee.PaymentMethod"), a = f(o.splitBy === "Amount" ? "currency" : "percent"), { ...l } = b({
+function D() {
+  const { bankAccounts: r, paymentMethod: n, mode: i, handleDelete: m, isPending: u } = p(), { t } = s("Employee.PaymentMethod"), a = y(n.splitBy === "Amount" ? "currency" : "percent"), { ...l } = b({
     data: r,
     columns: [
       { key: "name", title: t("nicknameColumn") },
@@ -17,12 +19,12 @@ function w() {
         key: "splitAmount",
         title: t("allocationColumn"),
         render: (e) => a(
-          o.splits?.find((c) => c.uuid === e.uuid)?.splitAmount ?? 0
+          n.splits?.find((c) => c.uuid === e.uuid)?.splitAmount ?? 0
         )
       }
     ],
-    itemMenu: (e) => /* @__PURE__ */ n(
-      y,
+    itemMenu: (e) => /* @__PURE__ */ o(
+      f,
       {
         items: [
           {
@@ -30,7 +32,7 @@ function w() {
             onClick: () => {
               m(e.uuid);
             },
-            icon: /* @__PURE__ */ n(d, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ o(d, { "aria-hidden": !0 })
           }
         ],
         triggerLabel: t("hamburgerTitle"),
@@ -39,9 +41,9 @@ function w() {
     )
   });
   if (i === "LIST")
-    return /* @__PURE__ */ n(k, { label: t("bankAccountsListLabel"), ...l });
+    return /* @__PURE__ */ o(k, { label: t("bankAccountsListLabel"), ...l });
 }
 export {
-  w as BankAccountsList
+  D as BankAccountsList
 };
 //# sourceMappingURL=BankAccountsList.js.map

package/dist/components/Employee/PaymentMethod/BankAccountsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BankAccountsList.js","sources":["../../../../src/components/Employee/PaymentMethod/BankAccountsList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { usePaymentMethod } from './usePaymentMethod'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { DataView, useDataView } from '@/components/Common'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\n\nexport function BankAccountsList() {\n  const { bankAccounts, paymentMethod, mode, handleDelete, isPending } = usePaymentMethod()\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const format = useNumberFormatter(paymentMethod.splitBy === 'Amount' ? 'currency' : 'percent')\n\n  const { ...dataViewProps } = useDataView({\n    data: bankAccounts,\n    columns: [\n      { key: 'name', title: t('nicknameColumn') },\n      { key: 'routingNumber', title: t('routingNumberColumn') },\n      { key: 'accountType', title: t('accountTypeColumn') },\n      {\n        key: 'splitAmount',\n        title: t('allocationColumn'),\n        render: bankAccount => {\n          return format(\n            paymentMethod.splits?.find(split => split.uuid === bankAccount.uuid)?.splitAmount ?? 0,\n          )\n        },\n      },\n    ],\n    itemMenu: bankAccount => {\n      return (\n        <HamburgerMenu\n          items={[\n            {\n              label: t('deleteBankAccountCta'),\n              onClick: () => {\n                handleDelete(bankAccount.uuid)\n              },\n              icon: <TrashCanSvg aria-hidden />,\n            },\n          ]}\n          triggerLabel={t('hamburgerTitle')}\n          isLoading={isPending}\n        />\n      )\n    },\n  })\n\n  if (mode !== 'LIST') return\n\n  return <DataView label={t('bankAccountsListLabel')} {...dataViewProps} />\n}\n"],"names":["BankAccountsList","bankAccounts","paymentMethod","mode","handleDelete","isPending","usePaymentMethod","useTranslation","format","useNumberFormatter","dataViewProps","useDataView","bankAccount","split","jsx","HamburgerMenu","TrashCanSvg","DataView"],"mappings":";;;;;;;;AAOO,SAASA,IAAmB;AACjC,QAAM,EAAE,cAAAC,GAAc,eAAAC,GAAe,MAAAC,GAAM,cAAAC,GAAc,WAAAC,EAAA,IAAcC,EAAA,GACjE,EAAE,EAAA,IAAMC,EAAe,wBAAwB,GAC/CC,IAASC,EAAmBP,EAAc,YAAY,WAAW,aAAa,SAAS,GAEvF,EAAE,GAAGQ,EAAA,IAAkBC,EAAY;AAAA,IACvC,MAAMV;AAAA,IACN,SAAS;AAAA,MACP,EAAE,KAAK,QAAQ,OAAO,EAAE,gBAAgB,EAAA;AAAA,MACxC,EAAE,KAAK,iBAAiB,OAAO,EAAE,qBAAqB,EAAA;AAAA,MACtD,EAAE,KAAK,eAAe,OAAO,EAAE,mBAAmB,EAAA;AAAA,MAClD;AAAA,QACE,KAAK;AAAA,QACL,OAAO,EAAE,kBAAkB;AAAA,QAC3B,QAAQ,CAAAW,MACCJ;AAAA,UACLN,EAAc,QAAQ,KAAK,CAAAW,MAASA,EAAM,SAASD,EAAY,IAAI,GAAG,eAAe;AAAA,QAAA;AAAA,MAEzF;AAAA,IACF;AAAA,IAEF,UAAU,CAAAA,MAEN,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,YACE,OAAO,EAAE,sBAAsB;AAAA,YAC/B,SAAS,MAAM;AACb,cAAAX,EAAaQ,EAAY,IAAI;AAAA,YAC/B;AAAA,YACA,MAAM,gBAAAE,EAACE,GAAA,EAAY,eAAW,GAAA,CAAC;AAAA,UAAA;AAAA,QACjC;AAAA,QAEF,cAAc,EAAE,gBAAgB;AAAA,QAChC,WAAWX;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB,CACD;AAED,MAAIF,MAAS;AAEb,6BAAQc,GAAA,EAAS,OAAO,EAAE,uBAAuB,GAAI,GAAGP,GAAe;AACzE;"}
+{"version":3,"file":"BankAccountsList.js","sources":["../../../../src/components/Employee/PaymentMethod/BankAccountsList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { usePaymentMethod } from './usePaymentMethod'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { DataView, useDataView } from '@/components/Common'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\n\nexport function BankAccountsList() {\n  const { bankAccounts, paymentMethod, mode, handleDelete, isPending } = usePaymentMethod()\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const format = useNumberFormatter(paymentMethod.splitBy === 'Amount' ? 'currency' : 'percent')\n\n  const { ...dataViewProps } = useDataView({\n    data: bankAccounts,\n    columns: [\n      { key: 'name', title: t('nicknameColumn') },\n      { key: 'routingNumber', title: t('routingNumberColumn') },\n      { key: 'accountType', title: t('accountTypeColumn') },\n      {\n        key: 'splitAmount',\n        title: t('allocationColumn'),\n        render: bankAccount => {\n          return format(\n            paymentMethod.splits?.find(split => split.uuid === bankAccount.uuid)?.splitAmount ?? 0,\n          )\n        },\n      },\n    ],\n    itemMenu: bankAccount => {\n      return (\n        <HamburgerMenu\n          items={[\n            {\n              label: t('deleteBankAccountCta'),\n              onClick: () => {\n                handleDelete(bankAccount.uuid)\n              },\n              icon: <TrashCanSvg aria-hidden />,\n            },\n          ]}\n          triggerLabel={t('hamburgerTitle')}\n          isLoading={isPending}\n        />\n      )\n    },\n  })\n\n  if (mode !== 'LIST') return\n\n  return <DataView label={t('bankAccountsListLabel')} {...dataViewProps} />\n}\n"],"names":["BankAccountsList","bankAccounts","paymentMethod","mode","handleDelete","isPending","usePaymentMethod","useTranslation","format","useNumberFormatter","dataViewProps","useDataView","bankAccount","split","jsx","HamburgerMenu","TrashCanSvg","DataView"],"mappings":";;;;;;;;;;AAOO,SAASA,IAAmB;AACjC,QAAM,EAAE,cAAAC,GAAc,eAAAC,GAAe,MAAAC,GAAM,cAAAC,GAAc,WAAAC,EAAA,IAAcC,EAAA,GACjE,EAAE,EAAA,IAAMC,EAAe,wBAAwB,GAC/CC,IAASC,EAAmBP,EAAc,YAAY,WAAW,aAAa,SAAS,GAEvF,EAAE,GAAGQ,EAAA,IAAkBC,EAAY;AAAA,IACvC,MAAMV;AAAA,IACN,SAAS;AAAA,MACP,EAAE,KAAK,QAAQ,OAAO,EAAE,gBAAgB,EAAA;AAAA,MACxC,EAAE,KAAK,iBAAiB,OAAO,EAAE,qBAAqB,EAAA;AAAA,MACtD,EAAE,KAAK,eAAe,OAAO,EAAE,mBAAmB,EAAA;AAAA,MAClD;AAAA,QACE,KAAK;AAAA,QACL,OAAO,EAAE,kBAAkB;AAAA,QAC3B,QAAQ,CAAAW,MACCJ;AAAA,UACLN,EAAc,QAAQ,KAAK,CAAAW,MAASA,EAAM,SAASD,EAAY,IAAI,GAAG,eAAe;AAAA,QAAA;AAAA,MAEzF;AAAA,IACF;AAAA,IAEF,UAAU,CAAAA,MAEN,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,YACE,OAAO,EAAE,sBAAsB;AAAA,YAC/B,SAAS,MAAM;AACb,cAAAX,EAAaQ,EAAY,IAAI;AAAA,YAC/B;AAAA,YACA,MAAM,gBAAAE,EAACE,GAAA,EAAY,eAAW,GAAA,CAAC;AAAA,UAAA;AAAA,QACjC;AAAA,QAEF,cAAc,EAAE,gBAAgB;AAAA,QAChC,WAAWX;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB,CACD;AAED,MAAIF,MAAS;AAEb,6BAAQc,GAAA,EAAS,OAAO,EAAE,uBAAuB,GAAI,GAAGP,GAAe;AACzE;"}

package/dist/components/Employee/PaymentMethod/PaymentTypeForm.js

@@ -1,17 +1,20 @@
 import { jsx as p } from "react/jsx-runtime";
-import { useTranslation as c } from "react-i18next";
+import { useTranslation as m } from "react-i18next";
 import { z as o } from "zod";
-import { usePaymentMethod as n } from "./usePaymentMethod.js";
+import { usePaymentMethod as c } from "./usePaymentMethod.js";
 import { PAYMENT_METHODS as r } from "../../../shared/constants.js";
-import { RadioGroupField as m } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import "classnames";
+import { RadioGroupField as n } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "react";
 o.object({
   type: o.enum(["Check", "Direct Deposit"])
 });
-function f() {
-  const { mode: t, isAdmin: i } = n(), { t: e } = c("Employee.PaymentMethod");
+function b() {
+  const { mode: t, isAdmin: i } = c(), { t: e } = m("Employee.PaymentMethod");
   if (!(t !== "INITIAL" && t !== "LIST"))
     return /* @__PURE__ */ p(
-      m,
+      n,
       {
         name: "type",
         label: e("paymentFieldsetLegend"),
@@ -32,6 +35,6 @@ function f() {
     );
 }
 export {
-  f as PaymentTypeForm
+  b as PaymentTypeForm
 };
 //# sourceMappingURL=PaymentTypeForm.js.map

package/dist/components/Employee/PaymentMethod/PaymentTypeForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentTypeForm.js","sources":["../../../../src/components/Employee/PaymentMethod/PaymentTypeForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { usePaymentMethod } from './usePaymentMethod'\nimport { RadioGroupField } from '@/components/Common'\nimport { PAYMENT_METHODS } from '@/shared/constants'\n\nexport const PaymentTypeSchema = z.object({\n  type: z.enum(['Check', 'Direct Deposit']),\n})\nexport type PaymentTypeInputs = z.input<typeof PaymentTypeSchema>\nexport type PaymentTypePayload = z.output<typeof PaymentTypeSchema>\n\nexport function PaymentTypeForm() {\n  const { mode, isAdmin } = usePaymentMethod()\n  const { t } = useTranslation('Employee.PaymentMethod')\n  if (mode !== 'INITIAL' && mode !== 'LIST') return\n  return (\n    <RadioGroupField\n      name=\"type\"\n      label={t('paymentFieldsetLegend')}\n      shouldVisuallyHideLabel\n      options={[\n        {\n          value: PAYMENT_METHODS.directDeposit,\n          label: t('directDepositLabel'),\n          description: isAdmin ? t('directDepositDescription') : t('directDepositDescriptionSelf'),\n        },\n        {\n          value: PAYMENT_METHODS.check,\n          label: t('checkLabel'),\n          description: isAdmin ? t('checkDescription') : t('checkDescriptionSelf'),\n        },\n      ]}\n    />\n  )\n}\n"],"names":["z","PaymentTypeForm","mode","isAdmin","usePaymentMethod","t","useTranslation","jsx","RadioGroupField","PAYMENT_METHODS"],"mappings":";;;;;;AAMiCA,EAAE,OAAO;AAAA,EACxC,MAAMA,EAAE,KAAK,CAAC,SAAS,gBAAgB,CAAC;AAC1C,CAAC;AAIM,SAASC,IAAkB;AAChC,QAAM,EAAE,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA,GACpB,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB;AACrD,MAAI,EAAAJ,MAAS,aAAaA,MAAS;AACnC,WACE,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOH,EAAE,uBAAuB;AAAA,QAChC,yBAAuB;AAAA,QACvB,SAAS;AAAA,UACP;AAAA,YACE,OAAOI,EAAgB;AAAA,YACvB,OAAOJ,EAAE,oBAAoB;AAAA,YAC7B,aAAuBA,EAAVF,IAAY,6BAAgC,8BAAN;AAAA,UAAoC;AAAA,UAEzF;AAAA,YACE,OAAOM,EAAgB;AAAA,YACvB,OAAOJ,EAAE,YAAY;AAAA,YACrB,aAAuBA,EAAVF,IAAY,qBAAwB,sBAAN;AAAA,UAA4B;AAAA,QACzE;AAAA,MACF;AAAA,IAAA;AAGN;"}
+{"version":3,"file":"PaymentTypeForm.js","sources":["../../../../src/components/Employee/PaymentMethod/PaymentTypeForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { usePaymentMethod } from './usePaymentMethod'\nimport { RadioGroupField } from '@/components/Common'\nimport { PAYMENT_METHODS } from '@/shared/constants'\n\nexport const PaymentTypeSchema = z.object({\n  type: z.enum(['Check', 'Direct Deposit']),\n})\nexport type PaymentTypeInputs = z.input<typeof PaymentTypeSchema>\nexport type PaymentTypePayload = z.output<typeof PaymentTypeSchema>\n\nexport function PaymentTypeForm() {\n  const { mode, isAdmin } = usePaymentMethod()\n  const { t } = useTranslation('Employee.PaymentMethod')\n  if (mode !== 'INITIAL' && mode !== 'LIST') return\n  return (\n    <RadioGroupField\n      name=\"type\"\n      label={t('paymentFieldsetLegend')}\n      shouldVisuallyHideLabel\n      options={[\n        {\n          value: PAYMENT_METHODS.directDeposit,\n          label: t('directDepositLabel'),\n          description: isAdmin ? t('directDepositDescription') : t('directDepositDescriptionSelf'),\n        },\n        {\n          value: PAYMENT_METHODS.check,\n          label: t('checkLabel'),\n          description: isAdmin ? t('checkDescription') : t('checkDescriptionSelf'),\n        },\n      ]}\n    />\n  )\n}\n"],"names":["z","PaymentTypeForm","mode","isAdmin","usePaymentMethod","t","useTranslation","jsx","RadioGroupField","PAYMENT_METHODS"],"mappings":";;;;;;;;;AAMiCA,EAAE,OAAO;AAAA,EACxC,MAAMA,EAAE,KAAK,CAAC,SAAS,gBAAgB,CAAC;AAC1C,CAAC;AAIM,SAASC,IAAkB;AAChC,QAAM,EAAE,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA,GACpB,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB;AACrD,MAAI,EAAAJ,MAAS,aAAaA,MAAS;AACnC,WACE,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOH,EAAE,uBAAuB;AAAA,QAChC,yBAAuB;AAAA,QACvB,SAAS;AAAA,UACP;AAAA,YACE,OAAOI,EAAgB;AAAA,YACvB,OAAOJ,EAAE,oBAAoB;AAAA,YAC7B,aAAuBA,EAAVF,IAAY,6BAAgC,8BAAN;AAAA,UAAoC;AAAA,UAEzF;AAAA,YACE,OAAOM,EAAgB;AAAA,YACvB,OAAOJ,EAAE,YAAY;AAAA,YACrB,aAAuBA,EAAVF,IAAY,qBAAwB,sBAAN;AAAA,UAA4B;AAAA,QACzE;AAAA,MACF;AAAA,IAAA;AAGN;"}

package/dist/components/Employee/PaymentMethod/Split.js

@@ -5,13 +5,14 @@ import { ErrorMessage as z } from "@hookform/error-message";
 import y from "dompurify";
 import { useMemo as j, useEffect as D } from "react";
 import { usePaymentMethod as N } from "./usePaymentMethod.js";
-import { useLocale as q } from "../../../contexts/LocaleProvider/useLocale.js";
-import { useComponentContext as w } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { ReorderableList as I } from "../../Common/ReorderableList/ReorderableList.js";
 import { SPLIT_BY as h } from "../../../shared/constants.js";
-import { RadioGroupField as W } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import "classnames";
+import { RadioGroupField as q } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
 import { NumberInputField as F } from "../../Common/Fields/NumberInputField/NumberInputField.js";
-function oe() {
+import { useComponentContext as w } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useLocale as I } from "../../../contexts/LocaleProvider/useLocale.js";
+import { ReorderableList as W } from "../../Common/ReorderableList/ReorderableList.js";
+function ie() {
   const { paymentMethod: r, bankAccounts: m, mode: c } = N(), {
     control: s,
     setValue: o,
@@ -21,7 +22,7 @@ function oe() {
   } = B(), { t: u } = g("Employee.PaymentMethod"), d = A("splitBy"), L = A("priority"), a = j(() => r.splits ?? [], [r.splits]), l = Object.entries(L).reduce(
     (e, [t, i]) => !e || (L[e] ?? 0) < i ? t : e,
     ""
-  ), { currency: $ } = q();
+  ), { currency: $ } = I();
   D(() => {
     if (a.length)
       if (d === h.amount) {
@@ -49,7 +50,7 @@ function oe() {
     const p = a[i];
     p && (o("priority", t), l && l !== p.uuid && (S(`splitAmount.${l}`), b(l, 0)), b(p.uuid, null));
   }, R = () => d === h.amount ? /* @__PURE__ */ n(
-    I,
+    W,
     {
       label: u("draggableListLabel"),
       items: a.map((e) => ({
@@ -105,7 +106,7 @@ function oe() {
     /* @__PURE__ */ n(f.Heading, { as: "h2", children: u("title") }),
     /* @__PURE__ */ n(V, { t: u, i18nKey: "splitDescription", components: { p: /* @__PURE__ */ n(f.Text, {}) } }),
     /* @__PURE__ */ n(
-      W,
+      q,
       {
         name: "splitBy",
         label: u("splitByLabel"),
@@ -168,6 +169,6 @@ function G({
   ) }, r.uuid);
 }
 export {
-  oe as Split
+  ie as Split
 };
 //# sourceMappingURL=Split.js.map

package/dist/components/Employee/PaymentMethod/Split.js.map

@@ -1 +1 @@
-{"version":3,"file":"Split.js","sources":["../../../../src/components/Employee/PaymentMethod/Split.tsx"],"sourcesContent":["import type { Control } from 'react-hook-form'\nimport { useFormContext } from 'react-hook-form'\nimport { Trans, useTranslation } from 'react-i18next'\nimport { type EmployeePaymentMethod } from '@gusto/embedded-api/models/components/employeepaymentmethod'\nimport { ErrorMessage } from '@hookform/error-message'\nimport { Fragment } from 'react/jsx-runtime'\nimport DOMPurify from 'dompurify'\nimport { useEffect, useMemo } from 'react'\nimport { usePaymentMethod, type CombinedSchemaInputs } from './usePaymentMethod'\nimport { NumberInputField, RadioGroupField } from '@/components/Common'\nimport { useLocale } from '@/contexts/LocaleProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ReorderableList } from '@/components/Common/ReorderableList'\nimport { SPLIT_BY } from '@/shared/constants'\n\ntype Split = NonNullable<EmployeePaymentMethod['splits']>[number]\n\nexport function Split() {\n  const { paymentMethod, bankAccounts, mode } = usePaymentMethod()\n  const {\n    control,\n    setValue,\n    resetField,\n    watch,\n    formState: { errors },\n  } = useFormContext<CombinedSchemaInputs>()\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const splitBy = watch('splitBy')\n  const priorities = watch('priority')\n\n  const splits = useMemo(() => paymentMethod.splits ?? [], [paymentMethod.splits])\n\n  const remainderId = Object.entries(priorities).reduce(\n    (maxId, [uuid, priority]) => (!maxId || (priorities[maxId] ?? 0) < priority ? uuid : maxId),\n    '',\n  )\n\n  const { currency } = useLocale()\n\n  // Handle splitBy value changes\n  useEffect(() => {\n    // Only run cleanup if splits exist\n    if (!splits.length) return\n\n    // Clean up when switching modes\n    if (splitBy === SPLIT_BY.amount) {\n      // When switching to amount mode, set the last item as remainder (null) and others to 0\n      const newAmountValues = splits.reduce<Record<string, number | null>>((acc, curr) => {\n        acc[curr.uuid] = curr.uuid === remainderId ? null : 0\n        return acc\n      }, {})\n      setValue('splitAmount', newAmountValues)\n    } else {\n      // When switching to percentage mode, set the first item to 100% and others to 0\n      const newPercentageValues = splits.reduce<Record<string, number>>((acc, curr, index) => {\n        acc[curr.uuid] = index === 0 ? 100 : 0\n        return acc\n      }, {})\n      setValue('splitAmount', newPercentageValues)\n    }\n  }, [splitBy, splits, remainderId, setValue])\n\n  const Components = useComponentContext()\n\n  if (mode !== 'SPLIT' || bankAccounts.length < 2 || paymentMethod.splits === null) return null\n  //Used by form schema to determine variant\n  setValue('isSplit', true)\n\n  const updateSplitAmount = (uuid: string, value: number | null) => {\n    setValue(`splitAmount.${uuid}`, value)\n  }\n\n  const handleReorder = (newOrder: number[]) => {\n    // Calculate new priorities based on new order\n    const newPriorities = newOrder.reduce(\n      (acc: Record<string, number>, curr: number, currIndex: number) => {\n        const split = splits[curr]\n        return split ? { ...acc, [split.uuid]: currIndex + 1 } : acc\n      },\n      {},\n    )\n\n    // Get the last split in the new order\n    const lastSplitIndex = newOrder[newOrder.length - 1]\n    if (lastSplitIndex === undefined) return\n\n    const lastSplit = splits[lastSplitIndex]\n    if (!lastSplit) return\n\n    // Update priorities\n    setValue('priority', newPriorities)\n\n    // Clear the previous remainder if different from the new one\n    if (remainderId && remainderId !== lastSplit.uuid) {\n      resetField(`splitAmount.${remainderId}`)\n      updateSplitAmount(remainderId, 0)\n    }\n\n    // Set the new last item to null (remainder)\n    updateSplitAmount(lastSplit.uuid, null)\n  }\n\n  const renderFieldsList = () => {\n    if (splitBy === SPLIT_BY.amount) {\n      return (\n        <ReorderableList\n          key={`reorderable-amount-list-${splitBy}`}\n          label={t('draggableListLabel')}\n          items={splits.map(split => ({\n            label: split.name as string,\n            content: (\n              <AmountField\n                key={`amount-${split.uuid}`}\n                split={split}\n                onChange={value => {\n                  updateSplitAmount(split.uuid, value)\n                }}\n                remainderId={remainderId}\n              />\n            ),\n          }))}\n          onReorder={handleReorder}\n        />\n      )\n    }\n\n    return splits.map(split => (\n      <PercentageField\n        key={`percentage-${split.uuid}`}\n        split={split}\n        control={control}\n        onChange={value => {\n          updateSplitAmount(split.uuid, value)\n        }}\n        currency={currency}\n      />\n    ))\n  }\n\n  return (\n    <>\n      <ErrorMessage\n        errors={errors}\n        name=\"splitAmount.root\"\n        render={({ message }) => {\n          // Handle enhanced error messages with current total\n          if (message && message.startsWith('percentage_split_total_error:')) {\n            const total = message.split(':')[1] || '0'\n            return (\n              <Components.Alert\n                status=\"error\"\n                label={t('validations.percentageErrorWithTotal', { total })}\n              />\n            )\n          }\n          // Fallback to original error message\n          return <Components.Alert status=\"error\" label={t('validations.percentageError')} />\n        }}\n      />\n      <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n      <Trans t={t} i18nKey=\"splitDescription\" components={{ p: <Components.Text /> }} />\n      <RadioGroupField\n        name=\"splitBy\"\n        label={t('splitByLabel')}\n        options={[\n          { value: SPLIT_BY.percentage, label: t('percentageLabel') },\n          { value: SPLIT_BY.amount, label: t('amountLabel') },\n        ]}\n      />\n      {paymentMethod.splits && renderFieldsList()}\n    </>\n  )\n}\n\nfunction AmountField({\n  split,\n  remainderId,\n  onChange,\n}: {\n  split: Split\n  remainderId: string\n  onChange: (value: number | null) => void\n}) {\n  const { t } = useTranslation('Employee.PaymentMethod')\n  return (\n    <NumberInputField\n      name={`splitAmount.${split.uuid}`}\n      label={t('splitAmountLabel', {\n        name: DOMPurify.sanitize(split.name ?? ''),\n        account_number: DOMPurify.sanitize(split.hiddenAccountNumber ?? ''),\n        interpolation: { escapeValue: false },\n      })}\n      format=\"currency\"\n      min={0}\n      isRequired\n      errorMessage={t('validations.amountError')}\n      placeholder={remainderId === split.uuid ? t('remainderLabel') : ''}\n      isDisabled={remainderId === split.uuid}\n      onChange={onChange}\n    />\n  )\n}\n\nfunction PercentageField({\n  split,\n  control,\n  onChange,\n  currency,\n}: {\n  split: Split\n  control: Control<CombinedSchemaInputs>\n  onChange: (value: number) => void\n  currency: string\n}) {\n  const { t } = useTranslation('Employee.PaymentMethod')\n  return (\n    <Fragment key={split.uuid}>\n      <NumberInputField\n        name={`splitAmount.${split.uuid}`}\n        label={t('splitAmountLabel', {\n          name: DOMPurify.sanitize(split.name ?? ''),\n          account_number: DOMPurify.sanitize(split.hiddenAccountNumber ?? ''),\n          interpolation: { escapeValue: false },\n        })}\n        format=\"percent\"\n        min={0}\n        isRequired\n        errorMessage={t('validations.amountError')}\n        onChange={onChange}\n      />\n    </Fragment>\n  )\n}\n"],"names":["Split","paymentMethod","bankAccounts","mode","usePaymentMethod","control","setValue","resetField","watch","errors","useFormContext","t","useTranslation","splitBy","priorities","splits","useMemo","remainderId","maxId","uuid","priority","currency","useLocale","useEffect","SPLIT_BY","newAmountValues","acc","curr","newPercentageValues","index","Components","useComponentContext","updateSplitAmount","value","handleReorder","newOrder","newPriorities","currIndex","split","lastSplitIndex","lastSplit","renderFieldsList","jsx","ReorderableList","AmountField","PercentageField","jsxs","Fragment","ErrorMessage","message","total","Trans","RadioGroupField","onChange","NumberInputField","DOMPurify"],"mappings":"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"}
+{"version":3,"file":"Split.js","sources":["../../../../src/components/Employee/PaymentMethod/Split.tsx"],"sourcesContent":["import type { Control } from 'react-hook-form'\nimport { useFormContext } from 'react-hook-form'\nimport { Trans, useTranslation } from 'react-i18next'\nimport { type EmployeePaymentMethod } from '@gusto/embedded-api/models/components/employeepaymentmethod'\nimport { ErrorMessage } from '@hookform/error-message'\nimport { Fragment } from 'react/jsx-runtime'\nimport DOMPurify from 'dompurify'\nimport { useEffect, useMemo } from 'react'\nimport { usePaymentMethod, type CombinedSchemaInputs } from './usePaymentMethod'\nimport { NumberInputField, RadioGroupField } from '@/components/Common'\nimport { useLocale } from '@/contexts/LocaleProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ReorderableList } from '@/components/Common/ReorderableList'\nimport { SPLIT_BY } from '@/shared/constants'\n\ntype Split = NonNullable<EmployeePaymentMethod['splits']>[number]\n\nexport function Split() {\n  const { paymentMethod, bankAccounts, mode } = usePaymentMethod()\n  const {\n    control,\n    setValue,\n    resetField,\n    watch,\n    formState: { errors },\n  } = useFormContext<CombinedSchemaInputs>()\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const splitBy = watch('splitBy')\n  const priorities = watch('priority')\n\n  const splits = useMemo(() => paymentMethod.splits ?? [], [paymentMethod.splits])\n\n  const remainderId = Object.entries(priorities).reduce(\n    (maxId, [uuid, priority]) => (!maxId || (priorities[maxId] ?? 0) < priority ? uuid : maxId),\n    '',\n  )\n\n  const { currency } = useLocale()\n\n  // Handle splitBy value changes\n  useEffect(() => {\n    // Only run cleanup if splits exist\n    if (!splits.length) return\n\n    // Clean up when switching modes\n    if (splitBy === SPLIT_BY.amount) {\n      // When switching to amount mode, set the last item as remainder (null) and others to 0\n      const newAmountValues = splits.reduce<Record<string, number | null>>((acc, curr) => {\n        acc[curr.uuid] = curr.uuid === remainderId ? null : 0\n        return acc\n      }, {})\n      setValue('splitAmount', newAmountValues)\n    } else {\n      // When switching to percentage mode, set the first item to 100% and others to 0\n      const newPercentageValues = splits.reduce<Record<string, number>>((acc, curr, index) => {\n        acc[curr.uuid] = index === 0 ? 100 : 0\n        return acc\n      }, {})\n      setValue('splitAmount', newPercentageValues)\n    }\n  }, [splitBy, splits, remainderId, setValue])\n\n  const Components = useComponentContext()\n\n  if (mode !== 'SPLIT' || bankAccounts.length < 2 || paymentMethod.splits === null) return null\n  //Used by form schema to determine variant\n  setValue('isSplit', true)\n\n  const updateSplitAmount = (uuid: string, value: number | null) => {\n    setValue(`splitAmount.${uuid}`, value)\n  }\n\n  const handleReorder = (newOrder: number[]) => {\n    // Calculate new priorities based on new order\n    const newPriorities = newOrder.reduce(\n      (acc: Record<string, number>, curr: number, currIndex: number) => {\n        const split = splits[curr]\n        return split ? { ...acc, [split.uuid]: currIndex + 1 } : acc\n      },\n      {},\n    )\n\n    // Get the last split in the new order\n    const lastSplitIndex = newOrder[newOrder.length - 1]\n    if (lastSplitIndex === undefined) return\n\n    const lastSplit = splits[lastSplitIndex]\n    if (!lastSplit) return\n\n    // Update priorities\n    setValue('priority', newPriorities)\n\n    // Clear the previous remainder if different from the new one\n    if (remainderId && remainderId !== lastSplit.uuid) {\n      resetField(`splitAmount.${remainderId}`)\n      updateSplitAmount(remainderId, 0)\n    }\n\n    // Set the new last item to null (remainder)\n    updateSplitAmount(lastSplit.uuid, null)\n  }\n\n  const renderFieldsList = () => {\n    if (splitBy === SPLIT_BY.amount) {\n      return (\n        <ReorderableList\n          key={`reorderable-amount-list-${splitBy}`}\n          label={t('draggableListLabel')}\n          items={splits.map(split => ({\n            label: split.name as string,\n            content: (\n              <AmountField\n                key={`amount-${split.uuid}`}\n                split={split}\n                onChange={value => {\n                  updateSplitAmount(split.uuid, value)\n                }}\n                remainderId={remainderId}\n              />\n            ),\n          }))}\n          onReorder={handleReorder}\n        />\n      )\n    }\n\n    return splits.map(split => (\n      <PercentageField\n        key={`percentage-${split.uuid}`}\n        split={split}\n        control={control}\n        onChange={value => {\n          updateSplitAmount(split.uuid, value)\n        }}\n        currency={currency}\n      />\n    ))\n  }\n\n  return (\n    <>\n      <ErrorMessage\n        errors={errors}\n        name=\"splitAmount.root\"\n        render={({ message }) => {\n          // Handle enhanced error messages with current total\n          if (message && message.startsWith('percentage_split_total_error:')) {\n            const total = message.split(':')[1] || '0'\n            return (\n              <Components.Alert\n                status=\"error\"\n                label={t('validations.percentageErrorWithTotal', { total })}\n              />\n            )\n          }\n          // Fallback to original error message\n          return <Components.Alert status=\"error\" label={t('validations.percentageError')} />\n        }}\n      />\n      <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n      <Trans t={t} i18nKey=\"splitDescription\" components={{ p: <Components.Text /> }} />\n      <RadioGroupField\n        name=\"splitBy\"\n        label={t('splitByLabel')}\n        options={[\n          { value: SPLIT_BY.percentage, label: t('percentageLabel') },\n          { value: SPLIT_BY.amount, label: t('amountLabel') },\n        ]}\n      />\n      {paymentMethod.splits && renderFieldsList()}\n    </>\n  )\n}\n\nfunction AmountField({\n  split,\n  remainderId,\n  onChange,\n}: {\n  split: Split\n  remainderId: string\n  onChange: (value: number | null) => void\n}) {\n  const { t } = useTranslation('Employee.PaymentMethod')\n  return (\n    <NumberInputField\n      name={`splitAmount.${split.uuid}`}\n      label={t('splitAmountLabel', {\n        name: DOMPurify.sanitize(split.name ?? ''),\n        account_number: DOMPurify.sanitize(split.hiddenAccountNumber ?? ''),\n        interpolation: { escapeValue: false },\n      })}\n      format=\"currency\"\n      min={0}\n      isRequired\n      errorMessage={t('validations.amountError')}\n      placeholder={remainderId === split.uuid ? t('remainderLabel') : ''}\n      isDisabled={remainderId === split.uuid}\n      onChange={onChange}\n    />\n  )\n}\n\nfunction PercentageField({\n  split,\n  control,\n  onChange,\n  currency,\n}: {\n  split: Split\n  control: Control<CombinedSchemaInputs>\n  onChange: (value: number) => void\n  currency: string\n}) {\n  const { t } = useTranslation('Employee.PaymentMethod')\n  return (\n    <Fragment key={split.uuid}>\n      <NumberInputField\n        name={`splitAmount.${split.uuid}`}\n        label={t('splitAmountLabel', {\n          name: DOMPurify.sanitize(split.name ?? ''),\n          account_number: DOMPurify.sanitize(split.hiddenAccountNumber ?? ''),\n          interpolation: { escapeValue: false },\n        })}\n        format=\"percent\"\n        min={0}\n        isRequired\n        errorMessage={t('validations.amountError')}\n        onChange={onChange}\n      />\n    </Fragment>\n  )\n}\n"],"names":["Split","paymentMethod","bankAccounts","mode","usePaymentMethod","control","setValue","resetField","watch","errors","useFormContext","t","useTranslation","splitBy","priorities","splits","useMemo","remainderId","maxId","uuid","priority","currency","useLocale","useEffect","SPLIT_BY","newAmountValues","acc","curr","newPercentageValues","index","Components","useComponentContext","updateSplitAmount","value","handleReorder","newOrder","newPriorities","currIndex","split","lastSplitIndex","lastSplit","renderFieldsList","jsx","ReorderableList","AmountField","PercentageField","jsxs","Fragment","ErrorMessage","message","total","Trans","RadioGroupField","onChange","NumberInputField","DOMPurify"],"mappings":"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"}

package/dist/components/Employee/PaymentMethod/usePaymentMethod.js

@@ -6,14 +6,16 @@ import "react-error-boundary";
 import "react-i18next";
 import "@gusto/embedded-api/models/errors/apierror";
 import "@gusto/embedded-api/models/errors/sdkvalidationerror";
-import "@gusto/embedded-api/models/errors/unprocessableentityerrorobject";
 import "@tanstack/react-query";
 import "../../Base/useBase.js";
 import "../../../shared/constants.js";
+import "classnames";
 import "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import "dompurify";
+import "../../../contexts/LocaleProvider/useLocale.js";
 import { createCompoundContext as a } from "../../Base/createCompoundContext.js";
-const B = t.union([
+const S = t.union([
   l.extend({
     type: t.literal("Direct Deposit"),
     isSplit: t.literal(!1)
@@ -53,10 +55,10 @@ const B = t.union([
       remainder: t.string()
     })
   ])
-]), [x, S] = a("PaymentMethodContext");
+]), [k, C] = a("PaymentMethodContext");
 export {
-  B as CombinedSchema,
-  S as PaymentMethodProvider,
-  x as usePaymentMethod
+  S as CombinedSchema,
+  C as PaymentMethodProvider,
+  k as usePaymentMethod
 };
 //# sourceMappingURL=usePaymentMethod.js.map