@gusto/embedded-react-sdk 0.37.0-rc.5 → 0.38.0

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

@@ -2,34 +2,35 @@ import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import { useTranslation as h } from "react-i18next";
 import { useEmployeesGetSuspense as g } from "@gusto/embedded-api/react-query/employeesGet";
 import { useCompaniesGetSuspense as y } from "@gusto/embedded-api/react-query/companiesGet";
-import m from "dompurify";
+import s from "dompurify";
 import { useMemo as c } from "react";
 import { BaseComponent as x } from "../../Base/Base.js";
 import { useBase as E } from "../../Base/useBase.js";
 import { Flex as r } from "../../Common/Flex/Flex.js";
-import { ActionsLayout as C } from "../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as L } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as S, useComponentDictionary as D } from "../../../i18n/I18n.js";
-import { componentEvents as I } from "../../../shared/constants.js";
+import "classnames";
+import { componentEvents as C } from "../../../shared/constants.js";
+import { ActionsLayout as L } from "../../Common/ActionsLayout/ActionsLayout.js";
+import { useComponentContext as S } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as D, useComponentDictionary as I } from "../../../i18n/I18n.js";
 import N from "../../../assets/icons/icon-arrow-right.svg.js";
-function P(o) {
-  return S("Employee.Landing"), D("Employee.Landing", o.dictionary), /* @__PURE__ */ e(x, { ...o, children: /* @__PURE__ */ e(v, { ...o, children: o.children }) });
+function w(o) {
+  return D("Employee.Landing"), I("Employee.Landing", o.dictionary), /* @__PURE__ */ e(x, { ...o, children: /* @__PURE__ */ e(v, { ...o, children: o.children }) });
 }
 const v = ({ employeeId: o, companyId: p, className: l }) => {
-  const { onEvent: d } = E(), t = L(), {
+  const { onEvent: d } = E(), t = S(), {
     data: { employee: a }
-  } = g({ employeeId: o }), f = c(() => m.sanitize(a.firstName), [a]), {
-    data: { company: s }
-  } = y({ companyId: p }), u = c(() => m.sanitize(s?.name ?? ""), [s]), { t: n } = h("Employee.Landing");
+  } = g({ employeeId: o }), f = c(() => s.sanitize(a.firstName), [a]), {
+    data: { company: m }
+  } = y({ companyId: p }), u = c(() => s.sanitize(m?.name ?? ""), [m]), { t: n } = h("Employee.Landing");
   return /* @__PURE__ */ e("section", { className: l, children: /* @__PURE__ */ e(
     t.Box,
     {
-      footer: /* @__PURE__ */ e(C, { children: /* @__PURE__ */ i(
+      footer: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ i(
         t.Button,
         {
           variant: "secondary",
           onClick: () => {
-            d(I.EMPLOYEE_SELF_ONBOARDING_START);
+            d(C.EMPLOYEE_SELF_ONBOARDING_START);
           },
           children: [
             n("getStartedCta"),
@@ -60,6 +61,6 @@ const v = ({ employeeId: o, companyId: p, className: l }) => {
   ) });
 };
 export {
-  P as Landing
+  w 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 DOMPurify from 'dompurify'\nimport { useMemo } from 'react'\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'\nimport ArrowRightIcon from '@/assets/icons/icon-arrow-right.svg?react'\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 sanitizedFirstName = useMemo(() => DOMPurify.sanitize(employee!.firstName), [employee])\n\n  const {\n    data: { company },\n  } = useCompaniesGetSuspense({ companyId })\n  const sanitizedCompanyName = useMemo(() => DOMPurify.sanitize(company?.name ?? ''), [company])\n\n  const { t } = useTranslation('Employee.Landing')\n\n  return (\n    <section className={className}>\n      <Components.Box\n        footer={\n          <ActionsLayout>\n            <Components.Button\n              variant=\"secondary\"\n              onClick={() => {\n                onEvent(componentEvents.EMPLOYEE_SELF_ONBOARDING_START)\n              }}\n            >\n              {t('getStartedCta')}\n              <ArrowRightIcon aria-hidden />\n            </Components.Button>\n          </ActionsLayout>\n        }\n      >\n        <Flex alignItems=\"center\" flexDirection=\"column\" gap={32}>\n          <Flex flexDirection=\"column\" gap={4}>\n            <Components.Heading as=\"h2\">\n              {t('landingSubtitle', {\n                firstName: sanitizedFirstName,\n                companyName: sanitizedCompanyName,\n                interpolation: { escapeValue: false },\n              })}\n            </Components.Heading>\n            <Components.Text variant=\"supporting\">{t('landingDescription')}</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>\n      </Components.Box>\n    </section>\n  )\n}\n"],"names":["Landing","props","useI18n","useComponentDictionary","jsx","BaseComponent","Root","employeeId","companyId","className","onEvent","useBase","Components","useComponentContext","employee","useEmployeesGetSuspense","sanitizedFirstName","useMemo","DOMPurify","company","useCompaniesGetSuspense","sanitizedCompanyName","t","useTranslation","ActionsLayout","jsxs","componentEvents","ArrowRightIcon","Flex"],"mappings":";;;;;;;;;;;;;;AAuBO,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,IAAqBC,EAAQ,MAAMC,EAAU,SAASJ,EAAU,SAAS,GAAG,CAACA,CAAQ,CAAC,GAEtF;AAAA,IACJ,MAAM,EAAE,SAAAK,EAAA;AAAA,EAAQ,IACdC,EAAwB,EAAE,WAAAZ,GAAW,GACnCa,IAAuBJ,EAAQ,MAAMC,EAAU,SAASC,GAAS,QAAQ,EAAE,GAAG,CAACA,CAAO,CAAC,GAEvF,EAAE,GAAAG,EAAA,IAAMC,EAAe,kBAAkB;AAE/C,SACE,gBAAAnB,EAAC,aAAQ,WAAAK,GACP,UAAA,gBAAAL;AAAA,IAACQ,EAAW;AAAA,IAAX;AAAA,MACC,0BACGY,GAAA,EACC,UAAA,gBAAAC;AAAA,QAACb,EAAW;AAAA,QAAX;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM;AACb,YAAAF,EAAQgB,EAAgB,8BAA8B;AAAA,UACxD;AAAA,UAEC,UAAA;AAAA,YAAAJ,EAAE,eAAe;AAAA,YAClB,gBAAAlB,EAACuB,GAAA,EAAe,eAAW,GAAA,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEhC;AAAA,MAGF,4BAACC,GAAA,EAAK,YAAW,UAAS,eAAc,UAAS,KAAK,IACpD,UAAA;AAAA,QAAA,gBAAAH,EAACG,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,UAAA,gBAAAxB,EAACQ,EAAW,SAAX,EAAmB,IAAG,MACpB,YAAE,mBAAmB;AAAA,YACpB,WAAWI;AAAA,YACX,aAAaK;AAAA,YACb,eAAe,EAAE,aAAa,GAAA;AAAA,UAAM,CACrC,GACH;AAAA,UACA,gBAAAjB,EAACQ,EAAW,MAAX,EAAgB,SAAQ,cAAc,UAAAU,EAAE,oBAAoB,EAAA,CAAE;AAAA,QAAA,GACjE;AAAA,QACA,gBAAAG,EAACG,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,UAAA,gBAAAxB,EAACQ,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAAU,EAAE,eAAe,GAAE;AAAA,UAChD,gBAAAlB;AAAA,YAACQ,EAAW;AAAA,YAAX;AAAA,cACC,OAAO,CAACU,EAAE,oBAAoB,GAAGA,EAAE,eAAe,GAAGA,EAAE,gBAAgB,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QAC1E,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA,GAEJ;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 DOMPurify from 'dompurify'\nimport { useMemo } from 'react'\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'\nimport ArrowRightIcon from '@/assets/icons/icon-arrow-right.svg?react'\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 sanitizedFirstName = useMemo(() => DOMPurify.sanitize(employee!.firstName), [employee])\n\n  const {\n    data: { company },\n  } = useCompaniesGetSuspense({ companyId })\n  const sanitizedCompanyName = useMemo(() => DOMPurify.sanitize(company?.name ?? ''), [company])\n\n  const { t } = useTranslation('Employee.Landing')\n\n  return (\n    <section className={className}>\n      <Components.Box\n        footer={\n          <ActionsLayout>\n            <Components.Button\n              variant=\"secondary\"\n              onClick={() => {\n                onEvent(componentEvents.EMPLOYEE_SELF_ONBOARDING_START)\n              }}\n            >\n              {t('getStartedCta')}\n              <ArrowRightIcon aria-hidden />\n            </Components.Button>\n          </ActionsLayout>\n        }\n      >\n        <Flex alignItems=\"center\" flexDirection=\"column\" gap={32}>\n          <Flex flexDirection=\"column\" gap={4}>\n            <Components.Heading as=\"h2\">\n              {t('landingSubtitle', {\n                firstName: sanitizedFirstName,\n                companyName: sanitizedCompanyName,\n                interpolation: { escapeValue: false },\n              })}\n            </Components.Heading>\n            <Components.Text variant=\"supporting\">{t('landingDescription')}</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>\n      </Components.Box>\n    </section>\n  )\n}\n"],"names":["Landing","props","useI18n","useComponentDictionary","jsx","BaseComponent","Root","employeeId","companyId","className","onEvent","useBase","Components","useComponentContext","employee","useEmployeesGetSuspense","sanitizedFirstName","useMemo","DOMPurify","company","useCompaniesGetSuspense","sanitizedCompanyName","t","useTranslation","ActionsLayout","jsxs","componentEvents","ArrowRightIcon","Flex"],"mappings":";;;;;;;;;;;;;;;AAuBO,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,IAAqBC,EAAQ,MAAMC,EAAU,SAASJ,EAAU,SAAS,GAAG,CAACA,CAAQ,CAAC,GAEtF;AAAA,IACJ,MAAM,EAAE,SAAAK,EAAA;AAAA,EAAQ,IACdC,EAAwB,EAAE,WAAAZ,GAAW,GACnCa,IAAuBJ,EAAQ,MAAMC,EAAU,SAASC,GAAS,QAAQ,EAAE,GAAG,CAACA,CAAO,CAAC,GAEvF,EAAE,GAAAG,EAAA,IAAMC,EAAe,kBAAkB;AAE/C,SACE,gBAAAnB,EAAC,aAAQ,WAAAK,GACP,UAAA,gBAAAL;AAAA,IAACQ,EAAW;AAAA,IAAX;AAAA,MACC,0BACGY,GAAA,EACC,UAAA,gBAAAC;AAAA,QAACb,EAAW;AAAA,QAAX;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM;AACb,YAAAF,EAAQgB,EAAgB,8BAA8B;AAAA,UACxD;AAAA,UAEC,UAAA;AAAA,YAAAJ,EAAE,eAAe;AAAA,YAClB,gBAAAlB,EAACuB,GAAA,EAAe,eAAW,GAAA,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEhC;AAAA,MAGF,4BAACC,GAAA,EAAK,YAAW,UAAS,eAAc,UAAS,KAAK,IACpD,UAAA;AAAA,QAAA,gBAAAH,EAACG,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,UAAA,gBAAAxB,EAACQ,EAAW,SAAX,EAAmB,IAAG,MACpB,YAAE,mBAAmB;AAAA,YACpB,WAAWI;AAAA,YACX,aAAaK;AAAA,YACb,eAAe,EAAE,aAAa,GAAA;AAAA,UAAM,CACrC,GACH;AAAA,UACA,gBAAAjB,EAACQ,EAAW,MAAX,EAAgB,SAAQ,cAAc,UAAAU,EAAE,oBAAoB,EAAA,CAAE;AAAA,QAAA,GACjE;AAAA,QACA,gBAAAG,EAACG,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,UAAA,gBAAAxB,EAACQ,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAAU,EAAE,eAAe,GAAE;AAAA,UAChD,gBAAAlB;AAAA,YAACQ,EAAW;AAAA,YAAX;AAAA,cACC,OAAO,CAACU,EAAE,oBAAoB,GAAGA,EAAE,eAAe,GAAGA,EAAE,gBAAgB,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QAC1E,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/Employee/OnboardingFlow/OnboardingFlow.js

@@ -1,8 +1,8 @@
 import { jsx as p } from "react/jsx-runtime";
 import { createMachine as c } from "robot3";
 import { useMemo as s } from "react";
-import { EmployeeListContextual as a } from "../EmployeeList/EmployeeList.js";
-import { employeeOnboardingMachine as f } from "./onboardingStateMachine.js";
+import { employeeOnboardingMachine as a } from "./onboardingStateMachine.js";
+import { EmployeeListContextual as f } from "./OnboardingFlowComponents.js";
 import { Flow as x } from "../../Flow/Flow.js";
 const j = ({
   companyId: o,
@@ -14,10 +14,10 @@ const j = ({
   const i = s(
     () => c(
       "index",
-      f,
+      a,
       (n) => ({
         ...n,
-        component: a,
+        component: f,
         companyId: o,
         isAdmin: !0,
         defaultValues: r,

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

@@ -1 +1 @@
-{"version":3,"file":"OnboardingFlow.js","sources":["../../../../src/components/Employee/OnboardingFlow/OnboardingFlow.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport { EmployeeListContextual } from '../EmployeeList/EmployeeList'\nimport { employeeOnboardingMachine } from './onboardingStateMachine'\nimport type {\n  OnboardingDefaultValues,\n  OnboardingContextInterface,\n} from './OnboardingFlowComponents'\nimport { Flow } from '@/components/Flow/Flow'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\nexport interface OnboardingFlowProps extends BaseComponentInterface {\n  companyId: string\n  defaultValues?: RequireAtLeastOne<OnboardingDefaultValues>\n  isSelfOnboardingEnabled?: boolean\n  withEmployeeI9?: boolean\n}\n\nexport const OnboardingFlow = ({\n  companyId,\n  onEvent,\n  defaultValues,\n  isSelfOnboardingEnabled = true,\n  withEmployeeI9 = false,\n}: OnboardingFlowProps) => {\n  const manageEmployees = useMemo(\n    () =>\n      createMachine(\n        'index',\n        employeeOnboardingMachine,\n        (initialContext: OnboardingContextInterface) => ({\n          ...initialContext,\n          component: EmployeeListContextual,\n          companyId,\n          isAdmin: true,\n          defaultValues,\n          isSelfOnboardingEnabled,\n          withEmployeeI9,\n        }),\n      ),\n    [companyId, defaultValues, isSelfOnboardingEnabled, withEmployeeI9],\n  )\n  return <Flow machine={manageEmployees} onEvent={onEvent} />\n}\n"],"names":["OnboardingFlow","companyId","onEvent","defaultValues","isSelfOnboardingEnabled","withEmployeeI9","manageEmployees","useMemo","createMachine","employeeOnboardingMachine","initialContext","EmployeeListContextual","jsx","Flow"],"mappings":";;;;;;AAmBO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,gBAAAC,IAAiB;AACnB,MAA2B;AACzB,QAAMC,IAAkBC;AAAA,IACtB,MACEC;AAAA,MACE;AAAA,MACAC;AAAA,MACA,CAACC,OAAgD;AAAA,QAC/C,GAAGA;AAAA,QACH,WAAWC;AAAA,QACX,WAAAV;AAAA,QACA,SAAS;AAAA,QACT,eAAAE;AAAA,QACA,yBAAAC;AAAA,QACA,gBAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACJ,GAAWE,GAAeC,GAAyBC,CAAc;AAAA,EAAA;AAEpE,SAAO,gBAAAO,EAACC,GAAA,EAAK,SAASP,GAAiB,SAAAJ,EAAA,CAAkB;AAC3D;"}
+{"version":3,"file":"OnboardingFlow.js","sources":["../../../../src/components/Employee/OnboardingFlow/OnboardingFlow.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport { employeeOnboardingMachine } from './onboardingStateMachine'\nimport {\n  type OnboardingDefaultValues,\n  type OnboardingContextInterface,\n  EmployeeListContextual,\n} from './OnboardingFlowComponents'\nimport { Flow } from '@/components/Flow/Flow'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\nexport interface OnboardingFlowProps extends BaseComponentInterface {\n  companyId: string\n  defaultValues?: RequireAtLeastOne<OnboardingDefaultValues>\n  isSelfOnboardingEnabled?: boolean\n  withEmployeeI9?: boolean\n}\n\nexport const OnboardingFlow = ({\n  companyId,\n  onEvent,\n  defaultValues,\n  isSelfOnboardingEnabled = true,\n  withEmployeeI9 = false,\n}: OnboardingFlowProps) => {\n  const manageEmployees = useMemo(\n    () =>\n      createMachine(\n        'index',\n        employeeOnboardingMachine,\n        (initialContext: OnboardingContextInterface) => ({\n          ...initialContext,\n          component: EmployeeListContextual,\n          companyId,\n          isAdmin: true,\n          defaultValues,\n          isSelfOnboardingEnabled,\n          withEmployeeI9,\n        }),\n      ),\n    [companyId, defaultValues, isSelfOnboardingEnabled, withEmployeeI9],\n  )\n  return <Flow machine={manageEmployees} onEvent={onEvent} />\n}\n"],"names":["OnboardingFlow","companyId","onEvent","defaultValues","isSelfOnboardingEnabled","withEmployeeI9","manageEmployees","useMemo","createMachine","employeeOnboardingMachine","initialContext","EmployeeListContextual","jsx","Flow"],"mappings":";;;;;;AAmBO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,gBAAAC,IAAiB;AACnB,MAA2B;AACzB,QAAMC,IAAkBC;AAAA,IACtB,MACEC;AAAA,MACE;AAAA,MACAC;AAAA,MACA,CAACC,OAAgD;AAAA,QAC/C,GAAGA;AAAA,QACH,WAAWC;AAAA,QACX,WAAAV;AAAA,QACA,SAAS;AAAA,QACT,eAAAE;AAAA,QACA,yBAAAC;AAAA,QACA,gBAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACJ,GAAWE,GAAeC,GAAyBC,CAAc;AAAA,EAAA;AAEpE,SAAO,gBAAAO,EAACC,GAAA,EAAK,SAASP,GAAiB,SAAAJ,EAAA,CAAkB;AAC3D;"}

package/dist/components/Employee/OnboardingFlow/OnboardingFlowComponents.d.ts

@@ -21,3 +21,4 @@ export interface OnboardingContextInterface extends FlowContextInterface {
 }
 export declare function FederalTaxesContextual(): import("react/jsx-runtime").JSX.Element;
 export declare function StateTaxesContextual(): import("react/jsx-runtime").JSX.Element;
+export declare const EmployeeListContextual: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Employee/OnboardingFlow/OnboardingFlowComponents.js

@@ -1,18 +1,24 @@
 import { jsx as t } from "react/jsx-runtime";
-import { FederalTaxes as a } from "../FederalTaxes/FederalTaxes.js";
-import { StateTaxes as i } from "../StateTaxes/StateTaxes.js";
+import { FederalTaxes as p } from "../FederalTaxes/FederalTaxes.js";
+import { StateTaxes as s } from "../StateTaxes/StateTaxes.js";
 import { ensureRequired as r } from "../../../helpers/ensureRequired.js";
 import { useFlow as n } from "../../Flow/useFlow.js";
-function x() {
+import { EmployeeList as i } from "../EmployeeList/EmployeeList.js";
+function c() {
   const { employeeId: e, onEvent: o } = n();
-  return /* @__PURE__ */ t(a, { onEvent: o, employeeId: r(e) });
+  return /* @__PURE__ */ t(p, { onEvent: o, employeeId: r(e) });
 }
-function f() {
+function y() {
   const { employeeId: e, onEvent: o, isAdmin: m } = n();
-  return /* @__PURE__ */ t(i, { onEvent: o, employeeId: r(e), isAdmin: m });
+  return /* @__PURE__ */ t(s, { onEvent: o, employeeId: r(e), isAdmin: m });
 }
+const E = () => {
+  const { companyId: e, onEvent: o } = n();
+  return /* @__PURE__ */ t(i, { companyId: e, onEvent: o });
+};
 export {
-  x as FederalTaxesContextual,
-  f as StateTaxesContextual
+  E as EmployeeListContextual,
+  c as FederalTaxesContextual,
+  y as StateTaxesContextual
 };
 //# sourceMappingURL=OnboardingFlowComponents.js.map

package/dist/components/Employee/OnboardingFlow/OnboardingFlowComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingFlowComponents.js","sources":["../../../../src/components/Employee/OnboardingFlow/OnboardingFlowComponents.tsx"],"sourcesContent":["import type { PaymentMethodBankAccount } from '@gusto/embedded-api/models/components/paymentmethodbankaccount'\nimport { FederalTaxes } from '../FederalTaxes/FederalTaxes'\nimport { StateTaxes } from '../StateTaxes/StateTaxes'\nimport type { ProfileDefaultValues } from '../Profile'\nimport type { CompensationDefaultValues } from '../Compensation'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport type { EmployeeOnboardingStatus } from '@/shared/constants'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\nexport type OnboardingDefaultValues = RequireAtLeastOne<{\n  profile?: ProfileDefaultValues\n  compensation?: CompensationDefaultValues\n}>\n\nexport interface OnboardingContextInterface extends FlowContextInterface {\n  companyId: string\n  employeeId?: string\n  isAdmin?: boolean\n  onboardingStatus?: (typeof EmployeeOnboardingStatus)[keyof typeof EmployeeOnboardingStatus]\n  startDate?: string\n  paymentMethod?: PaymentMethodBankAccount\n  defaultValues?: OnboardingDefaultValues\n  isSelfOnboardingEnabled?: boolean\n  withEmployeeI9?: boolean\n}\n\nexport function FederalTaxesContextual() {\n  const { employeeId, onEvent } = useFlow<OnboardingContextInterface>()\n  return <FederalTaxes onEvent={onEvent} employeeId={ensureRequired(employeeId)} />\n}\n\nexport function StateTaxesContextual() {\n  const { employeeId, onEvent, isAdmin } = useFlow<OnboardingContextInterface>()\n  return <StateTaxes onEvent={onEvent} employeeId={ensureRequired(employeeId)} isAdmin={isAdmin} />\n}\n"],"names":["FederalTaxesContextual","employeeId","onEvent","useFlow","FederalTaxes","ensureRequired","StateTaxesContextual","isAdmin","StateTaxes"],"mappings":";;;;;AA2BO,SAASA,IAAyB;AACvC,QAAM,EAAE,YAAAC,GAAY,SAAAC,EAAA,IAAYC,EAAA;AAChC,2BAAQC,GAAA,EAAa,SAAAF,GAAkB,YAAYG,EAAeJ,CAAU,GAAG;AACjF;AAEO,SAASK,IAAuB;AACrC,QAAM,EAAE,YAAAL,GAAY,SAAAC,GAAS,SAAAK,EAAA,IAAYJ,EAAA;AACzC,2BAAQK,GAAA,EAAW,SAAAN,GAAkB,YAAYG,EAAeJ,CAAU,GAAG,SAAAM,GAAkB;AACjG;"}
+{"version":3,"file":"OnboardingFlowComponents.js","sources":["../../../../src/components/Employee/OnboardingFlow/OnboardingFlowComponents.tsx"],"sourcesContent":["import type { PaymentMethodBankAccount } from '@gusto/embedded-api/models/components/paymentmethodbankaccount'\nimport { FederalTaxes } from '../FederalTaxes/FederalTaxes'\nimport { StateTaxes } from '../StateTaxes/StateTaxes'\nimport type { ProfileDefaultValues } from '../Profile'\nimport type { CompensationDefaultValues } from '../Compensation'\nimport { EmployeeList } from '../EmployeeList'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport type { EmployeeOnboardingStatus } from '@/shared/constants'\nimport type { RequireAtLeastOne } from '@/types/Helpers'\n\nexport type OnboardingDefaultValues = RequireAtLeastOne<{\n  profile?: ProfileDefaultValues\n  compensation?: CompensationDefaultValues\n}>\n\nexport interface OnboardingContextInterface extends FlowContextInterface {\n  companyId: string\n  employeeId?: string\n  isAdmin?: boolean\n  onboardingStatus?: (typeof EmployeeOnboardingStatus)[keyof typeof EmployeeOnboardingStatus]\n  startDate?: string\n  paymentMethod?: PaymentMethodBankAccount\n  defaultValues?: OnboardingDefaultValues\n  isSelfOnboardingEnabled?: boolean\n  withEmployeeI9?: boolean\n}\n\nexport function FederalTaxesContextual() {\n  const { employeeId, onEvent } = useFlow<OnboardingContextInterface>()\n  return <FederalTaxes onEvent={onEvent} employeeId={ensureRequired(employeeId)} />\n}\n\nexport function StateTaxesContextual() {\n  const { employeeId, onEvent, isAdmin } = useFlow<OnboardingContextInterface>()\n  return <StateTaxes onEvent={onEvent} employeeId={ensureRequired(employeeId)} isAdmin={isAdmin} />\n}\n\nexport const EmployeeListContextual = () => {\n  const { companyId, onEvent } = useFlow<OnboardingContextInterface>()\n  return <EmployeeList companyId={companyId} onEvent={onEvent} />\n}\n"],"names":["FederalTaxesContextual","employeeId","onEvent","useFlow","FederalTaxes","ensureRequired","StateTaxesContextual","isAdmin","StateTaxes","EmployeeListContextual","companyId","jsx","EmployeeList"],"mappings":";;;;;;AA4BO,SAASA,IAAyB;AACvC,QAAM,EAAE,YAAAC,GAAY,SAAAC,EAAA,IAAYC,EAAA;AAChC,2BAAQC,GAAA,EAAa,SAAAF,GAAkB,YAAYG,EAAeJ,CAAU,GAAG;AACjF;AAEO,SAASK,IAAuB;AACrC,QAAM,EAAE,YAAAL,GAAY,SAAAC,GAAS,SAAAK,EAAA,IAAYJ,EAAA;AACzC,2BAAQK,GAAA,EAAW,SAAAN,GAAkB,YAAYG,EAAeJ,CAAU,GAAG,SAAAM,GAAkB;AACjG;AAEO,MAAME,IAAyB,MAAM;AAC1C,QAAM,EAAE,WAAAC,GAAW,SAAAR,EAAA,IAAYC,EAAA;AAC/B,SAAO,gBAAAQ,EAACC,GAAA,EAAa,WAAAF,GAAsB,SAAAR,EAAA,CAAkB;AAC/D;"}

package/dist/components/Employee/OnboardingFlow/onboardingStateMachine.js

@@ -1,9 +1,8 @@
 import { state as E, transition as o, reduce as n, guard as i } from "robot3";
-import { StateTaxesContextual as _, FederalTaxesContextual as D } from "./OnboardingFlowComponents.js";
+import { EmployeeListContextual as l, StateTaxesContextual as _, FederalTaxesContextual as D } from "./OnboardingFlowComponents.js";
 import { componentEvents as t, EmployeeSelfOnboardingStatuses as c, EmployeeOnboardingStatus as d } from "../../../shared/constants.js";
-import { EmployeeListContextual as l } from "../EmployeeList/EmployeeList.js";
 import { CompensationContextual as N } from "../Compensation/Compensation.js";
-import { ProfileContextual as s } from "../Profile/Profile.js";
+import { ProfileContextual as p } from "../Profile/Profile.js";
 import { OnboardingSummaryContextual as O } from "../OnboardingSummary/OnboardingSummary.js";
 import { EmployeeDocumentsContextual as y } from "../EmployeeDocuments/EmployeeDocuments.js";
 import { DeductionsContextual as u } from "../Deductions/Deductions.js";
@@ -19,14 +18,14 @@ const a = (e) => (m) => ({
   d.SELF_ONBOARDING_COMPLETED_BY_EMPLOYEE,
   d.SELF_ONBOARDING_AWAITING_ADMIN_REVIEW,
   d.ONBOARDING_COMPLETED
-]), M = (e) => !(!e.withEmployeeI9 || e.onboardingStatus && S.has(e.onboardingStatus)), p = (e) => e.onboardingStatus ? !// prettier-ignore
+]), M = (e) => !(!e.withEmployeeI9 || e.onboardingStatus && S.has(e.onboardingStatus)), s = (e) => e.onboardingStatus ? !// prettier-ignore
 // @ts-expect-error: onboarding_status during runtime can be one of self onboarding statuses
-(c.has(e.onboardingStatus) || e.onboardingStatus === d.SELF_ONBOARDING_PENDING_INVITE) : !0, R = {
+(c.has(e.onboardingStatus) || e.onboardingStatus === d.SELF_ONBOARDING_PENDING_INVITE) : !0, b = {
   index: E(
     o(
       t.EMPLOYEE_CREATE,
       "employeeProfile",
-      n(a({ component: s, employeeId: void 0 }))
+      n(a({ component: p, employeeId: void 0 }))
     ),
     o(
       t.EMPLOYEE_UPDATE,
@@ -34,7 +33,7 @@ const a = (e) => (m) => ({
       n(
         (e, m) => ({
           ...e,
-          component: s,
+          component: p,
           employeeId: m.payload.employeeId,
           onboardingStatus: m.payload.onboardingStatus
         })
@@ -63,7 +62,7 @@ const a = (e) => (m) => ({
       t.EMPLOYEE_COMPENSATION_DONE,
       "federalTaxes",
       n(a({ component: D })),
-      i(p)
+      i(s)
     ),
     o(
       t.EMPLOYEE_COMPENSATION_DONE,
@@ -77,7 +76,7 @@ const a = (e) => (m) => ({
       t.EMPLOYEE_FEDERAL_TAXES_DONE,
       "stateTaxes",
       n(a({ component: _ })),
-      i(p)
+      i(s)
     ),
     r("index")
   ),
@@ -86,7 +85,7 @@ const a = (e) => (m) => ({
       t.EMPLOYEE_STATE_TAXES_DONE,
       "paymentMethod",
       n(a({ component: P })),
-      i(p)
+      i(s)
     ),
     r("index")
   ),
@@ -130,6 +129,6 @@ const a = (e) => (m) => ({
   final: E()
 };
 export {
-  R as employeeOnboardingMachine
+  b as employeeOnboardingMachine
 };
 //# sourceMappingURL=onboardingStateMachine.js.map

package/dist/components/Employee/OnboardingFlow/onboardingStateMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboardingStateMachine.js","sources":["../../../../src/components/Employee/OnboardingFlow/onboardingStateMachine.ts"],"sourcesContent":["import { transition, reduce, state, guard } from 'robot3'\nimport {\n  FederalTaxesContextual,\n  StateTaxesContextual,\n  type OnboardingContextInterface,\n} from './OnboardingFlowComponents'\nimport {\n  componentEvents,\n  EmployeeSelfOnboardingStatuses,\n  EmployeeOnboardingStatus,\n} from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\nimport { CompensationContextual } from '@/components/Employee/Compensation'\nimport { DeductionsContextual } from '@/components/Employee/Deductions'\nimport { EmployeeDocumentsContextual } from '@/components/Employee/EmployeeDocuments'\nimport { EmployeeListContextual } from '@/components/Employee/EmployeeList/EmployeeList'\nimport { PaymentMethodContextual } from '@/components/Employee/PaymentMethod'\nimport { ProfileContextual } from '@/components/Employee/Profile'\nimport { OnboardingSummaryContextual } from '@/components/Employee/OnboardingSummary'\n\ntype EventPayloads = {\n  [componentEvents.EMPLOYEE_UPDATE]: {\n    employeeId: string\n    onboardingStatus: (typeof EmployeeOnboardingStatus)[keyof typeof EmployeeOnboardingStatus]\n  }\n  [componentEvents.EMPLOYEE_PROFILE_DONE]: {\n    uuid: string\n    onboardingStatus: (typeof EmployeeOnboardingStatus)[keyof typeof EmployeeOnboardingStatus]\n    startDate: string\n  }\n}\n\nconst createReducer = (props: Partial<OnboardingContextInterface>) => {\n  return (ctx: OnboardingContextInterface): OnboardingContextInterface => ({\n    ...ctx,\n    ...props,\n  })\n}\n\nconst cancelTransition = (target: string, component?: React.ComponentType) =>\n  transition(\n    componentEvents.CANCEL,\n    target,\n    reduce(createReducer({ component: component ?? EmployeeListContextual })),\n  )\n\nconst employeeDocumentsConfigCompletedStatuses: Set<\n  (typeof EmployeeOnboardingStatus)[keyof typeof EmployeeOnboardingStatus]\n> = new Set([\n  EmployeeOnboardingStatus.SELF_ONBOARDING_COMPLETED_BY_EMPLOYEE,\n  EmployeeOnboardingStatus.SELF_ONBOARDING_AWAITING_ADMIN_REVIEW,\n  EmployeeOnboardingStatus.ONBOARDING_COMPLETED,\n])\n\nconst employeeDocumentsGuard = (ctx: OnboardingContextInterface) => {\n  if (!ctx.withEmployeeI9) return false\n  if (ctx.onboardingStatus && employeeDocumentsConfigCompletedStatuses.has(ctx.onboardingStatus))\n    return false\n  return true\n}\n\nconst selfOnboardingGuard = (ctx: OnboardingContextInterface) =>\n  ctx.onboardingStatus\n    ? !(\n        // prettier-ignore\n        // @ts-expect-error: onboarding_status during runtime can be one of self onboarding statuses\n        (EmployeeSelfOnboardingStatuses.has(ctx.onboardingStatus) ||\n        ctx.onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_PENDING_INVITE)\n      )\n    : true\n\nexport const employeeOnboardingMachine = {\n  index: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_CREATE,\n      'employeeProfile',\n      reduce(createReducer({ component: ProfileContextual, employeeId: undefined })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_UPDATE,\n      'employeeProfile',\n\n      reduce(\n        (\n          ctx: OnboardingContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.EMPLOYEE_UPDATE>,\n        ): OnboardingContextInterface => {\n          return {\n            ...ctx,\n            component: ProfileContextual,\n            employeeId: ev.payload.employeeId,\n            onboardingStatus: ev.payload.onboardingStatus,\n          }\n        },\n      ),\n    ),\n    transition(componentEvents.EMPLOYEE_ONBOARDING_DONE, 'final'),\n  ),\n  employeeProfile: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_PROFILE_DONE,\n      'compensation',\n      reduce(\n        (\n          ctx: OnboardingContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.EMPLOYEE_PROFILE_DONE>,\n        ): OnboardingContextInterface => ({\n          ...ctx,\n          component: CompensationContextual,\n          employeeId: ev.payload.uuid,\n          onboardingStatus: ev.payload.onboardingStatus,\n          startDate: ev.payload.startDate,\n        }),\n      ),\n    ),\n    cancelTransition('index'),\n  ),\n  compensation: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_COMPENSATION_DONE,\n      'federalTaxes',\n      reduce(createReducer({ component: FederalTaxesContextual })),\n      guard(selfOnboardingGuard),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_COMPENSATION_DONE,\n      'deductions',\n      reduce(createReducer({ component: DeductionsContextual })),\n    ),\n    cancelTransition('index'),\n  ),\n  federalTaxes: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_FEDERAL_TAXES_DONE,\n      'stateTaxes',\n      reduce(createReducer({ component: StateTaxesContextual })),\n      guard(selfOnboardingGuard),\n    ),\n    cancelTransition('index'),\n  ),\n  stateTaxes: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_STATE_TAXES_DONE,\n      'paymentMethod',\n      reduce(createReducer({ component: PaymentMethodContextual })),\n      guard(selfOnboardingGuard),\n    ),\n    cancelTransition('index'),\n  ),\n  paymentMethod: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_PAYMENT_METHOD_DONE,\n      'deductions',\n      reduce(createReducer({ component: DeductionsContextual })),\n    ),\n    cancelTransition('index'),\n  ),\n  deductions: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_DONE,\n      'employeeDocuments',\n      reduce(createReducer({ component: EmployeeDocumentsContextual })),\n      guard(employeeDocumentsGuard),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_DONE,\n      'summary',\n      reduce(createReducer({ component: OnboardingSummaryContextual })),\n    ),\n    cancelTransition('index'),\n  ),\n  employeeDocuments: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_DOCUMENTS_DONE,\n      'summary',\n      reduce(createReducer({ component: OnboardingSummaryContextual })),\n    ),\n    cancelTransition('index'),\n  ),\n  summary: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEES_LIST,\n      'index',\n      reduce(createReducer({ component: EmployeeListContextual, employeeId: undefined })),\n    ),\n  ),\n  final: state<MachineTransition>(),\n}\n"],"names":["createReducer","props","ctx","cancelTransition","target","component","transition","componentEvents","reduce","EmployeeListContextual","employeeDocumentsConfigCompletedStatuses","EmployeeOnboardingStatus","employeeDocumentsGuard","selfOnboardingGuard","EmployeeSelfOnboardingStatuses","employeeOnboardingMachine","state","ProfileContextual","ev","CompensationContextual","FederalTaxesContextual","guard","DeductionsContextual","StateTaxesContextual","PaymentMethodContextual","EmployeeDocumentsContextual","OnboardingSummaryContextual"],"mappings":"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"}
+{"version":3,"file":"onboardingStateMachine.js","sources":["../../../../src/components/Employee/OnboardingFlow/onboardingStateMachine.ts"],"sourcesContent":["import { transition, reduce, state, guard } from 'robot3'\nimport {\n  FederalTaxesContextual,\n  StateTaxesContextual,\n  type OnboardingContextInterface,\n  EmployeeListContextual,\n} from './OnboardingFlowComponents'\nimport {\n  componentEvents,\n  EmployeeSelfOnboardingStatuses,\n  EmployeeOnboardingStatus,\n} from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\nimport { CompensationContextual } from '@/components/Employee/Compensation'\nimport { DeductionsContextual } from '@/components/Employee/Deductions'\nimport { EmployeeDocumentsContextual } from '@/components/Employee/EmployeeDocuments'\nimport { PaymentMethodContextual } from '@/components/Employee/PaymentMethod'\nimport { ProfileContextual } from '@/components/Employee/Profile'\nimport { OnboardingSummaryContextual } from '@/components/Employee/OnboardingSummary'\n\ntype EventPayloads = {\n  [componentEvents.EMPLOYEE_UPDATE]: {\n    employeeId: string\n    onboardingStatus: (typeof EmployeeOnboardingStatus)[keyof typeof EmployeeOnboardingStatus]\n  }\n  [componentEvents.EMPLOYEE_PROFILE_DONE]: {\n    uuid: string\n    onboardingStatus: (typeof EmployeeOnboardingStatus)[keyof typeof EmployeeOnboardingStatus]\n    startDate: string\n  }\n}\n\nconst createReducer = (props: Partial<OnboardingContextInterface>) => {\n  return (ctx: OnboardingContextInterface): OnboardingContextInterface => ({\n    ...ctx,\n    ...props,\n  })\n}\n\nconst cancelTransition = (target: string, component?: React.ComponentType) =>\n  transition(\n    componentEvents.CANCEL,\n    target,\n    reduce(createReducer({ component: component ?? EmployeeListContextual })),\n  )\n\nconst employeeDocumentsConfigCompletedStatuses: Set<\n  (typeof EmployeeOnboardingStatus)[keyof typeof EmployeeOnboardingStatus]\n> = new Set([\n  EmployeeOnboardingStatus.SELF_ONBOARDING_COMPLETED_BY_EMPLOYEE,\n  EmployeeOnboardingStatus.SELF_ONBOARDING_AWAITING_ADMIN_REVIEW,\n  EmployeeOnboardingStatus.ONBOARDING_COMPLETED,\n])\n\nconst employeeDocumentsGuard = (ctx: OnboardingContextInterface) => {\n  if (!ctx.withEmployeeI9) return false\n  if (ctx.onboardingStatus && employeeDocumentsConfigCompletedStatuses.has(ctx.onboardingStatus))\n    return false\n  return true\n}\n\nconst selfOnboardingGuard = (ctx: OnboardingContextInterface) =>\n  ctx.onboardingStatus\n    ? !(\n        // prettier-ignore\n        // @ts-expect-error: onboarding_status during runtime can be one of self onboarding statuses\n        (EmployeeSelfOnboardingStatuses.has(ctx.onboardingStatus) ||\n        ctx.onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_PENDING_INVITE)\n      )\n    : true\n\nexport const employeeOnboardingMachine = {\n  index: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_CREATE,\n      'employeeProfile',\n      reduce(createReducer({ component: ProfileContextual, employeeId: undefined })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_UPDATE,\n      'employeeProfile',\n\n      reduce(\n        (\n          ctx: OnboardingContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.EMPLOYEE_UPDATE>,\n        ): OnboardingContextInterface => {\n          return {\n            ...ctx,\n            component: ProfileContextual,\n            employeeId: ev.payload.employeeId,\n            onboardingStatus: ev.payload.onboardingStatus,\n          }\n        },\n      ),\n    ),\n    transition(componentEvents.EMPLOYEE_ONBOARDING_DONE, 'final'),\n  ),\n  employeeProfile: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_PROFILE_DONE,\n      'compensation',\n      reduce(\n        (\n          ctx: OnboardingContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.EMPLOYEE_PROFILE_DONE>,\n        ): OnboardingContextInterface => ({\n          ...ctx,\n          component: CompensationContextual,\n          employeeId: ev.payload.uuid,\n          onboardingStatus: ev.payload.onboardingStatus,\n          startDate: ev.payload.startDate,\n        }),\n      ),\n    ),\n    cancelTransition('index'),\n  ),\n  compensation: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_COMPENSATION_DONE,\n      'federalTaxes',\n      reduce(createReducer({ component: FederalTaxesContextual })),\n      guard(selfOnboardingGuard),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_COMPENSATION_DONE,\n      'deductions',\n      reduce(createReducer({ component: DeductionsContextual })),\n    ),\n    cancelTransition('index'),\n  ),\n  federalTaxes: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_FEDERAL_TAXES_DONE,\n      'stateTaxes',\n      reduce(createReducer({ component: StateTaxesContextual })),\n      guard(selfOnboardingGuard),\n    ),\n    cancelTransition('index'),\n  ),\n  stateTaxes: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_STATE_TAXES_DONE,\n      'paymentMethod',\n      reduce(createReducer({ component: PaymentMethodContextual })),\n      guard(selfOnboardingGuard),\n    ),\n    cancelTransition('index'),\n  ),\n  paymentMethod: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_PAYMENT_METHOD_DONE,\n      'deductions',\n      reduce(createReducer({ component: DeductionsContextual })),\n    ),\n    cancelTransition('index'),\n  ),\n  deductions: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_DONE,\n      'employeeDocuments',\n      reduce(createReducer({ component: EmployeeDocumentsContextual })),\n      guard(employeeDocumentsGuard),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_DEDUCTION_DONE,\n      'summary',\n      reduce(createReducer({ component: OnboardingSummaryContextual })),\n    ),\n    cancelTransition('index'),\n  ),\n  employeeDocuments: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_DOCUMENTS_DONE,\n      'summary',\n      reduce(createReducer({ component: OnboardingSummaryContextual })),\n    ),\n    cancelTransition('index'),\n  ),\n  summary: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEES_LIST,\n      'index',\n      reduce(createReducer({ component: EmployeeListContextual, employeeId: undefined })),\n    ),\n  ),\n  final: state<MachineTransition>(),\n}\n"],"names":["createReducer","props","ctx","cancelTransition","target","component","transition","componentEvents","reduce","EmployeeListContextual","employeeDocumentsConfigCompletedStatuses","EmployeeOnboardingStatus","employeeDocumentsGuard","selfOnboardingGuard","EmployeeSelfOnboardingStatuses","employeeOnboardingMachine","state","ProfileContextual","ev","CompensationContextual","FederalTaxesContextual","guard","DeductionsContextual","StateTaxesContextual","PaymentMethodContextual","EmployeeDocumentsContextual","OnboardingSummaryContextual"],"mappings":";;;;;;;;;AAgCA,MAAMA,IAAgB,CAACC,MACd,CAACC,OAAiE;AAAA,EACvE,GAAGA;AAAA,EACH,GAAGD;AAAA,IAIDE,IAAmB,CAACC,GAAgBC,MACxCC;AAAA,EACEC,EAAgB;AAAA,EAChBH;AAAA,EACAI,EAAOR,EAAc,EAAE,WAAwBS,EAAA,CAAwB,CAAC;AAC1E,GAEIC,wBAEE,IAAI;AAAA,EACVC,EAAyB;AAAA,EACzBA,EAAyB;AAAA,EACzBA,EAAyB;AAC3B,CAAC,GAEKC,IAAyB,CAACV,MAC1B,GAACA,EAAI,kBACLA,EAAI,oBAAoBQ,EAAyC,IAAIR,EAAI,gBAAgB,IAKzFW,IAAsB,CAACX,MAC3BA,EAAI,mBACA;AAAA;AAAA,CAGGY,EAA+B,IAAIZ,EAAI,gBAAgB,KACxDA,EAAI,qBAAqBS,EAAyB,kCAEpD,IAEOI,IAA4B;AAAA,EACvC,OAAOC;AAAA,IACLV;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOR,EAAc,EAAE,WAAWiB,GAAmB,YAAY,QAAW,CAAC;AAAA,IAAA;AAAA,IAE/EX;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MAEAC;AAAA,QACE,CACEN,GACAgB,OAEO;AAAA,UACL,GAAGhB;AAAA,UACH,WAAWe;AAAA,UACX,YAAYC,EAAG,QAAQ;AAAA,UACvB,kBAAkBA,EAAG,QAAQ;AAAA,QAAA;AAAA,MAEjC;AAAA,IACF;AAAA,IAEFZ,EAAWC,EAAgB,0BAA0B,OAAO;AAAA,EAAA;AAAA,EAE9D,iBAAiBS;AAAA,IACfV;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CACEN,GACAgB,OACgC;AAAA,UAChC,GAAGhB;AAAA,UACH,WAAWiB;AAAA,UACX,YAAYD,EAAG,QAAQ;AAAA,UACvB,kBAAkBA,EAAG,QAAQ;AAAA,UAC7B,WAAWA,EAAG,QAAQ;AAAA,QAAA;AAAA,MACxB;AAAA,IACF;AAAA,IAEFf,EAAiB,OAAO;AAAA,EAAA;AAAA,EAE1B,cAAca;AAAA,IACZV;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOR,EAAc,EAAE,WAAWoB,EAAA,CAAwB,CAAC;AAAA,MAC3DC,EAAMR,CAAmB;AAAA,IAAA;AAAA,IAE3BP;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOR,EAAc,EAAE,WAAWsB,EAAA,CAAsB,CAAC;AAAA,IAAA;AAAA,IAE3DnB,EAAiB,OAAO;AAAA,EAAA;AAAA,EAE1B,cAAca;AAAA,IACZV;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOR,EAAc,EAAE,WAAWuB,EAAA,CAAsB,CAAC;AAAA,MACzDF,EAAMR,CAAmB;AAAA,IAAA;AAAA,IAE3BV,EAAiB,OAAO;AAAA,EAAA;AAAA,EAE1B,YAAYa;AAAA,IACVV;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOR,EAAc,EAAE,WAAWwB,EAAA,CAAyB,CAAC;AAAA,MAC5DH,EAAMR,CAAmB;AAAA,IAAA;AAAA,IAE3BV,EAAiB,OAAO;AAAA,EAAA;AAAA,EAE1B,eAAea;AAAA,IACbV;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOR,EAAc,EAAE,WAAWsB,EAAA,CAAsB,CAAC;AAAA,IAAA;AAAA,IAE3DnB,EAAiB,OAAO;AAAA,EAAA;AAAA,EAE1B,YAAYa;AAAA,IACVV;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOR,EAAc,EAAE,WAAWyB,EAAA,CAA6B,CAAC;AAAA,MAChEJ,EAAMT,CAAsB;AAAA,IAAA;AAAA,IAE9BN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOR,EAAc,EAAE,WAAW0B,EAAA,CAA6B,CAAC;AAAA,IAAA;AAAA,IAElEvB,EAAiB,OAAO;AAAA,EAAA;AAAA,EAE1B,mBAAmBa;AAAA,IACjBV;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOR,EAAc,EAAE,WAAW0B,EAAA,CAA6B,CAAC;AAAA,IAAA;AAAA,IAElEvB,EAAiB,OAAO;AAAA,EAAA;AAAA,EAE1B,SAASa;AAAA,IACPV;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAOR,EAAc,EAAE,WAAWS,GAAwB,YAAY,QAAW,CAAC;AAAA,IAAA;AAAA,EACpF;AAAA,EAEF,OAAOO,EAAA;AACT;"}

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

@@ -2,18 +2,19 @@ import { jsxs as d, jsx as e } from "react/jsx-runtime";
 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 f = () => {
-  const { handleAdd: a, handleCancel: i, isPending: r, bankAccounts: s, handleSplit: c, mode: t } = l(), { t: n } = m("Employee.PaymentMethod"), o = u();
+const P = () => {
+  const { handleAdd: i, handleCancel: a, isPending: r, 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: a, 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") }),
+    t === "LIST" && /* @__PURE__ */ e(o.Button, { variant: "secondary", type: "button", onClick: i, children: n("addAnotherCta") }),
     /* @__PURE__ */ e(o.Button, { type: "submit", isLoading: r, children: n(t === "ADD" || t === "SPLIT" ? "saveCta" : "submitCta") })
   ] });
 };
 export {
-  f as Actions
+  P 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,12 @@ 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";
+const v = () => {
+  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 +53,6 @@ const h = () => {
     ] });
 };
 export {
-  h as BankAccountForm
+  v 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

@@ -3,13 +3,14 @@ import { useTranslation as d } from "react-i18next";
 import { usePaymentMethod as f } from "./usePaymentMethod.js";
 import y from "../../../assets/icons/trashcan.svg.js";
 import { SPLIT_BY as b } from "../../../shared/constants.js";
+import "classnames";
 import k from "../../../hooks/useNumberFormatter.js";
 import { centsToDollars as g } from "../../../helpers/currencyHelpers.js";
 import { HamburgerMenu as A } from "../../Common/HamburgerMenu/HamburgerMenu.js";
 import { useDataView as T } from "../../Common/DataView/useDataView.js";
 import { DataView as h } from "../../Common/DataView/DataView.js";
-function x() {
-  const { bankAccounts: i, paymentMethod: e, mode: m, handleDelete: u, isPending: a } = f(), { t } = d("Employee.PaymentMethod"), l = k(e.splitBy === "Amount" ? "currency" : "percent"), { ...s } = T({
+function I() {
+  const { bankAccounts: i, paymentMethod: o, mode: m, handleDelete: u, deletePendingBankAccountUuid: a } = f(), { t } = d("Employee.PaymentMethod"), l = k(o.splitBy === "Amount" ? "currency" : "percent"), { ...s } = T({
     data: i,
     columns: [
       { key: "name", title: t("nicknameColumn") },
@@ -18,26 +19,26 @@ function x() {
       {
         key: "splitAmount",
         title: t("allocationColumn"),
-        render: (o) => {
-          const r = e.splits?.find((p) => p.uuid === o.uuid)?.splitAmount ?? 0, c = e.splitBy === b.amount ? g(r) ?? 0 : r;
+        render: (e) => {
+          const r = o.splits?.find((p) => p.uuid === e.uuid)?.splitAmount ?? 0, c = o.splitBy === b.amount ? g(r) ?? 0 : r;
           return l(c);
         }
       }
     ],
-    itemMenu: (o) => /* @__PURE__ */ n(
+    itemMenu: (e) => /* @__PURE__ */ n(
       A,
       {
         items: [
           {
             label: t("deleteBankAccountCta"),
             onClick: () => {
-              u(o.uuid);
+              u(e.uuid);
             },
             icon: /* @__PURE__ */ n(y, { "aria-hidden": !0 })
           }
         ],
         triggerLabel: t("hamburgerTitle"),
-        isLoading: a
+        isLoading: a === e.uuid
       }
     )
   });
@@ -45,6 +46,6 @@ function x() {
     return /* @__PURE__ */ n(h, { label: t("bankAccountsListLabel"), ...s });
 }
 export {
-  x as BankAccountsList
+  I 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'\nimport { SPLIT_BY } from '@/shared/constants'\nimport { centsToDollars } from '@/helpers/currencyHelpers'\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          const splitAmount =\n            paymentMethod.splits?.find(split => split.uuid === bankAccount.uuid)?.splitAmount ?? 0\n          const displayValue =\n            paymentMethod.splitBy === SPLIT_BY.amount\n              ? (centsToDollars(splitAmount) ?? 0)\n              : splitAmount\n          return format(displayValue)\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","splitAmount","split","displayValue","SPLIT_BY","centsToDollars","jsx","HamburgerMenu","TrashCanSvg","DataView"],"mappings":";;;;;;;;;;AASO,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,MAAe;AACrB,gBAAMC,IACJX,EAAc,QAAQ,KAAK,CAAAY,MAASA,EAAM,SAASF,EAAY,IAAI,GAAG,eAAe,GACjFG,IACJb,EAAc,YAAYc,EAAS,SAC9BC,EAAeJ,CAAW,KAAK,IAChCA;AACN,iBAAOL,EAAOO,CAAY;AAAA,QAC5B;AAAA,MAAA;AAAA,IACF;AAAA,IAEF,UAAU,CAAAH,MAEN,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,YACE,OAAO,EAAE,sBAAsB;AAAA,YAC/B,SAAS,MAAM;AACb,cAAAf,EAAaQ,EAAY,IAAI;AAAA,YAC/B;AAAA,YACA,MAAM,gBAAAM,EAACE,GAAA,EAAY,eAAW,GAAA,CAAC;AAAA,UAAA;AAAA,QACjC;AAAA,QAEF,cAAc,EAAE,gBAAgB;AAAA,QAChC,WAAWf;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB,CACD;AAED,MAAIF,MAAS;AAEb,6BAAQkB,GAAA,EAAS,OAAO,EAAE,uBAAuB,GAAI,GAAGX,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'\nimport { SPLIT_BY } from '@/shared/constants'\nimport { centsToDollars } from '@/helpers/currencyHelpers'\n\nexport function BankAccountsList() {\n  const { bankAccounts, paymentMethod, mode, handleDelete, deletePendingBankAccountUuid } =\n    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          const splitAmount =\n            paymentMethod.splits?.find(split => split.uuid === bankAccount.uuid)?.splitAmount ?? 0\n          const displayValue =\n            paymentMethod.splitBy === SPLIT_BY.amount\n              ? (centsToDollars(splitAmount) ?? 0)\n              : splitAmount\n          return format(displayValue)\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={deletePendingBankAccountUuid === bankAccount.uuid}\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","deletePendingBankAccountUuid","usePaymentMethod","useTranslation","format","useNumberFormatter","dataViewProps","useDataView","bankAccount","splitAmount","split","displayValue","SPLIT_BY","centsToDollars","jsx","HamburgerMenu","TrashCanSvg","DataView"],"mappings":";;;;;;;;;;;AASO,SAASA,IAAmB;AACjC,QAAM,EAAE,cAAAC,GAAc,eAAAC,GAAe,MAAAC,GAAM,cAAAC,GAAc,8BAAAC,EAAA,IACvDC,EAAA,GACI,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,MAAe;AACrB,gBAAMC,IACJX,EAAc,QAAQ,KAAK,CAAAY,MAASA,EAAM,SAASF,EAAY,IAAI,GAAG,eAAe,GACjFG,IACJb,EAAc,YAAYc,EAAS,SAC9BC,EAAeJ,CAAW,KAAK,IAChCA;AACN,iBAAOL,EAAOO,CAAY;AAAA,QAC5B;AAAA,MAAA;AAAA,IACF;AAAA,IAEF,UAAU,CAAAH,MAEN,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,YACE,OAAO,EAAE,sBAAsB;AAAA,YAC/B,SAAS,MAAM;AACb,cAAAf,EAAaQ,EAAY,IAAI;AAAA,YAC/B;AAAA,YACA,MAAM,gBAAAM,EAACE,GAAA,EAAY,eAAW,GAAA,CAAC;AAAA,UAAA;AAAA,QACjC;AAAA,QAEF,cAAc,EAAE,gBAAgB;AAAA,QAChC,WAAWf,MAAiCO,EAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAG9D,CACD;AAED,MAAIT,MAAS;AAEb,6BAAQkB,GAAA,EAAS,OAAO,EAAE,uBAAuB,GAAI,GAAGX,GAAe;AACzE;"}