npm - @gusto/embedded-react-sdk - Versions diffs - 0.9.0 → 0.10.0 - Mend

@gusto/embedded-react-sdk 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (150) hide show

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

@@ -1,71 +1,76 @@
-import { jsx as e, jsxs as m, Fragment as h } from "react/jsx-runtime";
-import { useTranslation as y } from "react-i18next";
-import C from "classnames";
-import { useEmployeesGetSuspense as I } from "@gusto/embedded-api/react-query/employeesGet";
-import { useEmployeesGetOnboardingStatusSuspense as D } from "@gusto/embedded-api/react-query/employeesGetOnboardingStatus";
-import i from "./OnboardingSummary.module.scss.js";
-import { BaseComponent as v } from "../../Base/Base.js";
-import { useBase as A } from "../../Base/useBase.js";
+import { jsx as e, jsxs as s, Fragment as g } from "react/jsx-runtime";
+import { useTranslation as b } from "react-i18next";
+import A from "classnames";
+import { useEmployeesGetSuspense as B } from "@gusto/embedded-api/react-query/employeesGet";
+import { useEmployeesGetOnboardingStatusSuspense as L } from "@gusto/embedded-api/react-query/employeesGetOnboardingStatus";
+import y from "dompurify";
+import { useMemo as S } from "react";
+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 g } from "../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as B } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as R, useComponentDictionary as T } from "../../../i18n/I18n.js";
-import { componentEvents as f, EmployeeOnboardingStatus as S } from "../../../shared/constants.js";
-import _ from "../../../assets/icons/success_check.svg.js";
-import w from "../../../assets/icons/unchecked_circular.svg.js";
-import { useFlow as G } from "../../Flow/useFlow.js";
-function L(n) {
-  return R("Employee.OnboardingSummary"), T("Employee.OnboardingSummary", n.dictionary), /* @__PURE__ */ e(v, { ...n, children: /* @__PURE__ */ e(P, { ...n, children: n.children }) });
+import { ActionsLayout as E } 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";
+function j(n) {
+  return _("Employee.OnboardingSummary"), w("Employee.OnboardingSummary", n.dictionary), /* @__PURE__ */ e(P, { ...n, children: /* @__PURE__ */ e(k, { ...n, children: n.children }) });
 }
-const P = ({ employeeId: n, className: c, isAdmin: s = !1 }) => {
-  const { onEvent: a } = A(), { t } = y("Employee.OnboardingSummary"), o = B(), {
-    data: { employee: E }
-  } = I({ employeeId: n }), { firstName: O, lastName: b } = E, { data: N } = D({ employeeId: n }), { onboardingStatus: u, onboardingSteps: l } = N.employeeOnboardingStatus, x = l?.length && l.findIndex((r) => r.required && !r.completed) > -1, p = u === S.ONBOARDING_COMPLETED || !x && u === S.SELF_ONBOARDING_PENDING_INVITE;
-  return /* @__PURE__ */ e("section", { className: c, children: /* @__PURE__ */ m(d, { flexDirection: "column", gap: 32, children: [
-    /* @__PURE__ */ e(d, { alignItems: "center", flexDirection: "column", gap: 8, children: s ? p ? /* @__PURE__ */ m(h, { children: [
-      /* @__PURE__ */ e(o.Heading, { as: "h2", textAlign: "center", children: t("onboardedAdminSubtitle", { name: `${O} ${b}` }) }),
-      /* @__PURE__ */ e(o.Text, { className: i.description, children: t("onboardedAdminDescription") })
-    ] }) : /* @__PURE__ */ m(d, { flexDirection: "column", alignItems: "flex-start", gap: 8, children: [
+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]);
+  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", {
+        name: `${D} ${v}`,
+        interpolation: { escapeValue: !1 }
+      }) }),
+      /* @__PURE__ */ e(o.Text, { className: r.description, children: t("onboardedAdminDescription") })
+    ] }) : /* @__PURE__ */ s(d, { flexDirection: "column", alignItems: "flex-start", gap: 8, children: [
       /* @__PURE__ */ e(o.Heading, { as: "h2", children: t("missingRequirementsSubtitle") }),
       /* @__PURE__ */ e(o.Text, { children: t("missingRequirementsDescription") }),
-      /* @__PURE__ */ e("ul", { className: i.list, children: l?.sort((r, F) => r.completed ? -1 : 1).map((r) => /* @__PURE__ */ m("li", { className: i.listItem, children: [
-        r.completed ? /* @__PURE__ */ e(_, { width: 24, height: 24, className: i.listItemIcon }) : /* @__PURE__ */ e(
-          w,
+      /* @__PURE__ */ e("ul", { className: r.list, children: l?.sort((i, q) => i.completed ? -1 : 1).map((i) => /* @__PURE__ */ s("li", { className: r.listItem, children: [
+        i.completed ? /* @__PURE__ */ e(F, { width: 24, height: 24, className: r.listItemIcon }) : /* @__PURE__ */ e(
+          G,
           {
             width: 24,
             height: 24,
-            className: C(i.listItemIcon, i.incomplete)
+            className: A(r.listItemIcon, r.incomplete)
           }
         ),
-        /* @__PURE__ */ e(o.Heading, { as: "h4", children: t(`steps.${r.id}`, r.title) })
-      ] }, r.id)) })
-    ] }) : /* @__PURE__ */ m(h, { children: [
+        /* @__PURE__ */ e(o.Heading, { as: "h4", children: t(`steps.${i.id}`, i.title) })
+      ] }, i.id)) })
+    ] }) : /* @__PURE__ */ s(g, { children: [
       /* @__PURE__ */ e(o.Heading, { as: "h2", textAlign: "center", children: t("onboardedSelfSubtitle") }),
-      /* @__PURE__ */ e(o.Text, { className: i.description, children: t("onboardedSelfDescription") }),
-      /* @__PURE__ */ e(g, { justifyContent: p ? "center" : "start", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(o.Text, { className: r.description, children: t("onboardedSelfDescription") }),
+      /* @__PURE__ */ e(E, { justifyContent: f ? "center" : "start", children: /* @__PURE__ */ e(
         o.Button,
         {
           variant: "secondary",
           onClick: () => {
-            a(f.EMPLOYEE_ONBOARDING_DONE);
+            a(N.EMPLOYEE_ONBOARDING_DONE);
           },
           children: t("doneCta")
         }
       ) })
     ] }) }),
-    s && /* @__PURE__ */ e(g, { justifyContent: "center", children: /* @__PURE__ */ e(
+    m && /* @__PURE__ */ e(E, { justifyContent: "center", children: /* @__PURE__ */ e(
       o.Button,
       {
         variant: "secondary",
         onClick: () => {
-          a(f.EMPLOYEES_LIST);
+          a(N.EMPLOYEES_LIST);
         },
         children: t("doneCta")
       }
     ) })
   ] }) });
-}, ee = () => {
-  const { employeeId: n, onEvent: c, isAdmin: s } = G(), { t: a } = y("common");
+}, se = () => {
+  const { employeeId: n, onEvent: c, isAdmin: m } = M(), { t: a } = b("common");
   if (!n)
     throw new Error(
       a("errors.missingParamsOrContext", {
@@ -74,10 +79,10 @@ const P = ({ employeeId: n, className: c, isAdmin: s = !1 }) => {
         provider: "FlowProvider"
       })
     );
-  return /* @__PURE__ */ e(L, { employeeId: n, onEvent: c, isAdmin: s });
+  return /* @__PURE__ */ e(j, { employeeId: n, onEvent: c, isAdmin: m });
 };
 export {
-  L as OnboardingSummary,
-  ee as OnboardingSummaryContextual
+  j as OnboardingSummary,
+  se as OnboardingSummaryContextual
 };
 //# sourceMappingURL=OnboardingSummary.js.map

package/dist/components/Employee/OnboardingSummary/OnboardingSummary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OnboardingSummary.js","sources":["../../../../src/components/Employee/OnboardingSummary/OnboardingSummary.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport { useEmployeesGetOnboardingStatusSuspense } from '@gusto/embedded-api/react-query/employeesGetOnboardingStatus'\nimport type { OnboardingContextInterface } from '../OnboardingFlow/OnboardingFlow'\nimport styles from './OnboardingSummary.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, EmployeeOnboardingStatus } from '@/shared/constants'\nimport SuccessCheck from '@/assets/icons/success_check.svg?react'\nimport UncheckedCircular from '@/assets/icons/unchecked_circular.svg?react'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { useComponentDictionary } from '@/i18n/I18n'\n\ninterface SummaryProps extends CommonComponentInterface<'Employee.OnboardingSummary'> {\n employeeId: string\n isAdmin?: boolean\n}\n\nexport function OnboardingSummary(props: SummaryProps & BaseComponentInterface) {\n useI18n('Employee.OnboardingSummary')\n useComponentDictionary('Employee.OnboardingSummary', props.dictionary)\n\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nconst Root = ({ employeeId, className, isAdmin = false }: SummaryProps) => {\n const { onEvent } = useBase()\n const { t } = useTranslation('Employee.OnboardingSummary')\n const Components = useComponentContext()\n\n const {\n data: { employee },\n } = useEmployeesGetSuspense({ employeeId })\n const { firstName, lastName } = employee!\n\n const { data } = useEmployeesGetOnboardingStatusSuspense({ employeeId })\n const { onboardingStatus, onboardingSteps } = data.employeeOnboardingStatus!\n\n const hasMissingRequirements =\n onboardingSteps?.length &&\n onboardingSteps.findIndex(step => step.required && !step.completed) > -1\n\n const isOnboardingCompleted =\n onboardingStatus === EmployeeOnboardingStatus.ONBOARDING_COMPLETED \|\|\n (!hasMissingRequirements &&\n onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_PENDING_INVITE)\n\n return (\n <section className={className}>\n <Flex flexDirection=\"column\" gap={32}>\n <Flex alignItems=\"center\" flexDirection=\"column\" gap={8}>\n {isAdmin ? (\n isOnboardingCompleted ? (\n <>\n <Components.Heading as=\"h2\" textAlign=\"center\">\n {t('onboardedAdminSubtitle', { name: `${firstName} ${lastName}` })}\n </Components.Heading>\n <Components.Text className={styles.description}>\n {t('onboardedAdminDescription')}\n </Components.Text>\n </>\n ) : (\n <Flex flexDirection=\"column\" alignItems=\"flex-start\" gap={8}>\n <Components.Heading as=\"h2\">{t('missingRequirementsSubtitle')}</Components.Heading>\n <Components.Text>{t('missingRequirementsDescription')}</Components.Text>\n <ul className={styles.list}>\n {onboardingSteps\n ?.sort((a, b) => (a.completed ? -1 : 1))\n .map(step => {\n return (\n <li key={step.id} className={styles.listItem}>\n {step.completed ? (\n <SuccessCheck width={24} height={24} className={styles.listItemIcon} />\n ) : (\n <UncheckedCircular\n width={24}\n height={24}\n className={classNames(styles.listItemIcon, styles.incomplete)}\n />\n )}\n <Components.Heading as=\"h4\">\n {/* @ts-expect-error: id has typeof keyof steps */}\n {t(`steps.${step.id}`, step.title)}\n </Components.Heading>\n </li>\n )\n })}\n </ul>\n </Flex>\n )\n ) : (\n <>\n <Components.Heading as=\"h2\" textAlign=\"center\">\n {t('onboardedSelfSubtitle')}\n </Components.Heading>\n <Components.Text className={styles.description}>\n {t('onboardedSelfDescription')}\n </Components.Text>\n <ActionsLayout justifyContent={isOnboardingCompleted ? 'center' : 'start'}>\n <Components.Button\n variant=\"secondary\"\n onClick={() => {\n onEvent(componentEvents.EMPLOYEE_ONBOARDING_DONE)\n }}\n >\n {t('doneCta')}\n </Components.Button>\n </ActionsLayout>\n </>\n )}\n </Flex>\n\n {isAdmin && (\n <ActionsLayout justifyContent={'center'}>\n <Components.Button\n variant=\"secondary\"\n onClick={() => {\n onEvent(componentEvents.EMPLOYEES_LIST)\n }}\n >\n {t('doneCta')}\n </Components.Button>\n </ActionsLayout>\n )}\n </Flex>\n </section>\n )\n}\n\nexport const OnboardingSummaryContextual = () => {\n const { employeeId, onEvent, isAdmin } = useFlow<OnboardingContextInterface>()\n const { t } = useTranslation('common')\n\n if (!employeeId) {\n throw new Error(\n t('errors.missingParamsOrContext', {\n component: 'Summary',\n param: 'employeeId',\n provider: 'FlowProvider',\n }),\n )\n }\n return <OnboardingSummary employeeId={employeeId} onEvent={onEvent} isAdmin={isAdmin} />\n}\n"],"names":["OnboardingSummary","props","useI18n","useComponentDictionary","jsx","BaseComponent","Root","employeeId","className","isAdmin","onEvent","useBase","useTranslation","Components","useComponentContext","employee","useEmployeesGetSuspense","firstName","lastName","data","useEmployeesGetOnboardingStatusSuspense","onboardingStatus","onboardingSteps","hasMissingRequirements","step","isOnboardingCompleted","EmployeeOnboardingStatus","jsxs","Flex","Fragment","styles","a","b","SuccessCheck","UncheckedCircular","classNames","ActionsLayout","componentEvents","OnboardingSummaryContextual","useFlow","t"],"mappings":"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"}
1	+ {"version":3,"file":"OnboardingSummary.js","sources":["../../../../src/components/Employee/OnboardingSummary/OnboardingSummary.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport { useEmployeesGetOnboardingStatusSuspense } from '@gusto/embedded-api/react-query/employeesGetOnboardingStatus'\nimport DOMPurify from 'dompurify'\nimport { useMemo } from 'react'\nimport type { OnboardingContextInterface } from '../OnboardingFlow/OnboardingFlow'\nimport styles from './OnboardingSummary.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, EmployeeOnboardingStatus } from '@/shared/constants'\nimport SuccessCheck from '@/assets/icons/success_check.svg?react'\nimport UncheckedCircular from '@/assets/icons/unchecked_circular.svg?react'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { useComponentDictionary } from '@/i18n/I18n'\n\ninterface SummaryProps extends CommonComponentInterface<'Employee.OnboardingSummary'> {\n employeeId: string\n isAdmin?: boolean\n}\n\nexport function OnboardingSummary(props: SummaryProps & BaseComponentInterface) {\n useI18n('Employee.OnboardingSummary')\n useComponentDictionary('Employee.OnboardingSummary', props.dictionary)\n\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nconst Root = ({ employeeId, className, isAdmin = false }: SummaryProps) => {\n const { onEvent } = useBase()\n const { t } = useTranslation('Employee.OnboardingSummary')\n const Components = useComponentContext()\n\n const {\n data: { employee },\n } = useEmployeesGetSuspense({ employeeId })\n const { firstName, lastName } = employee!\n\n const { data } = useEmployeesGetOnboardingStatusSuspense({ employeeId })\n const { onboardingStatus, onboardingSteps } = data.employeeOnboardingStatus!\n\n const hasMissingRequirements =\n onboardingSteps?.length &&\n onboardingSteps.findIndex(step => step.required && !step.completed) > -1\n\n const isOnboardingCompleted =\n onboardingStatus === EmployeeOnboardingStatus.ONBOARDING_COMPLETED \|\|\n (!hasMissingRequirements &&\n onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_PENDING_INVITE)\n\n const sanitizedFirstName = useMemo(() => DOMPurify.sanitize(firstName), [firstName])\n const sanitizedLastName = useMemo(() => DOMPurify.sanitize(lastName), [lastName])\n\n return (\n <section className={className}>\n <Flex flexDirection=\"column\" gap={32}>\n <Flex alignItems=\"center\" flexDirection=\"column\" gap={8}>\n {isAdmin ? (\n isOnboardingCompleted ? (\n <>\n <Components.Heading as=\"h2\" textAlign=\"center\">\n {t('onboardedAdminSubtitle', {\n name: `${sanitizedFirstName} ${sanitizedLastName}`,\n interpolation: { escapeValue: false },\n })}\n </Components.Heading>\n <Components.Text className={styles.description}>\n {t('onboardedAdminDescription')}\n </Components.Text>\n </>\n ) : (\n <Flex flexDirection=\"column\" alignItems=\"flex-start\" gap={8}>\n <Components.Heading as=\"h2\">{t('missingRequirementsSubtitle')}</Components.Heading>\n <Components.Text>{t('missingRequirementsDescription')}</Components.Text>\n <ul className={styles.list}>\n {onboardingSteps\n ?.sort((a, b) => (a.completed ? -1 : 1))\n .map(step => {\n return (\n <li key={step.id} className={styles.listItem}>\n {step.completed ? (\n <SuccessCheck width={24} height={24} className={styles.listItemIcon} />\n ) : (\n <UncheckedCircular\n width={24}\n height={24}\n className={classNames(styles.listItemIcon, styles.incomplete)}\n />\n )}\n <Components.Heading as=\"h4\">\n {/* @ts-expect-error: id has typeof keyof steps */}\n {t(`steps.${step.id}`, step.title)}\n </Components.Heading>\n </li>\n )\n })}\n </ul>\n </Flex>\n )\n ) : (\n <>\n <Components.Heading as=\"h2\" textAlign=\"center\">\n {t('onboardedSelfSubtitle')}\n </Components.Heading>\n <Components.Text className={styles.description}>\n {t('onboardedSelfDescription')}\n </Components.Text>\n <ActionsLayout justifyContent={isOnboardingCompleted ? 'center' : 'start'}>\n <Components.Button\n variant=\"secondary\"\n onClick={() => {\n onEvent(componentEvents.EMPLOYEE_ONBOARDING_DONE)\n }}\n >\n {t('doneCta')}\n </Components.Button>\n </ActionsLayout>\n </>\n )}\n </Flex>\n\n {isAdmin && (\n <ActionsLayout justifyContent={'center'}>\n <Components.Button\n variant=\"secondary\"\n onClick={() => {\n onEvent(componentEvents.EMPLOYEES_LIST)\n }}\n >\n {t('doneCta')}\n </Components.Button>\n </ActionsLayout>\n )}\n </Flex>\n </section>\n )\n}\n\nexport const OnboardingSummaryContextual = () => {\n const { employeeId, onEvent, isAdmin } = useFlow<OnboardingContextInterface>()\n const { t } = useTranslation('common')\n\n if (!employeeId) {\n throw new Error(\n t('errors.missingParamsOrContext', {\n component: 'Summary',\n param: 'employeeId',\n provider: 'FlowProvider',\n }),\n )\n }\n return <OnboardingSummary employeeId={employeeId} onEvent={onEvent} isAdmin={isAdmin} />\n}\n"],"names":["OnboardingSummary","props","useI18n","useComponentDictionary","jsx","BaseComponent","Root","employeeId","className","isAdmin","onEvent","useBase","useTranslation","Components","useComponentContext","employee","useEmployeesGetSuspense","firstName","lastName","data","useEmployeesGetOnboardingStatusSuspense","onboardingStatus","onboardingSteps","hasMissingRequirements","step","isOnboardingCompleted","EmployeeOnboardingStatus","sanitizedFirstName","useMemo","DOMPurify","sanitizedLastName","jsxs","Flex","Fragment","styles","a","b","SuccessCheck","UncheckedCircular","classNames","ActionsLayout","componentEvents","OnboardingSummaryContextual","useFlow","t"],"mappings":"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"}

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

@@ -1,10 +1,11 @@
 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 { 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();
+const f = () => {
+  const { handleAdd: a, handleCancel: i, 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 === "LIST" && s.length > 1 && /* @__PURE__ */ e(o.Button, { variant: "secondary", type: "button", onClick: c, children: n("splitCta") }),
@@ -13,6 +14,6 @@ const L = () => {
   ] });
 };
 export {
-  L as Actions
+  f as Actions
 };
 //# sourceMappingURL=Actions.js.map

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

	@@ -1 +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;AACrB,QAAA,EAAE,WAAAC,GAAW,cAAAC,GAAc,WAAAC,GAAW,cAAAC,GAAc,aAAAC,GAAa,MAAAC,MAASC,EAAiB,GAC3F,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/CC,IAAaC,EAAoB;AAEvC,2BACGC,GACG,EAAA,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,UACP,gBAAAO,EAAAH,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAAST,GAC3D,UAAAO,EAAE,eAAe,GACpB;AAAA,IAED,gBAAAK,EAAAH,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAWP,GACzC,UAAAK,EAAEF,MAAS,SAASA,MAAS,UAAU,YAAY,WAAW,EACjE,CAAA;AAAA,EAAA,GACF;AAEJ;"}
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;AACrB,QAAA,EAAE,WAAAC,GAAW,cAAAC,GAAc,WAAAC,GAAW,cAAAC,GAAc,aAAAC,GAAa,MAAAC,MAASC,EAAiB,GAC3F,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/CC,IAAaC,EAAoB;AAEvC,2BACGC,GACG,EAAA,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,UACP,gBAAAO,EAAAH,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAAST,GAC3D,UAAAO,EAAE,eAAe,GACpB;AAAA,IAED,gBAAAK,EAAAH,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAWP,GACzC,UAAAK,EAAEF,MAAS,SAASA,MAAS,UAAU,YAAY,WAAW,EACjE,CAAA;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -2,7 +2,7 @@ import { jsxs as i, Fragment as u, jsx as r } from "react/jsx-runtime";
 import { useFormContext as m } from "react-hook-form";
 import { useTranslation as c } from "react-i18next";
 import { usePaymentMethod as s } from "./usePaymentMethod.js";
-import { PAYMENT_METHODS as l } from "./Constants.js";
+import { PAYMENT_METHODS as l } from "../../../shared/constants.js";
 import { TextInputField as o } from "../../Common/Fields/TextInputField/TextInputField.js";
 import { RadioGroupField as p } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
 const h = () => {

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

	@@ -1 +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 { ~~PAYMENT_METHODS~~ } from '~~./Constants~~'\nimport { ~~RadioGroupField,~~ ~~TextInputField~~ } from '@/~~components~~/~~Common~~'\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 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,EAAY,IAAIC,EAAiB,GACzC,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,UAAAC,EAAS,IAAIC,EAAkC;AAEvD,MAAK,EAAAN,MAAS,SAASA,MAAS,aAAcC,MAAgBM,EAAgB;AAI9E,WAAAF,EAAS,kBAAkB,EAAI,GAI3B,gBAAAG,EAAAC,GAAA,EAAA,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,MAC3C;AAAA,MAEA,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,MAC7C;AAAA,MAEA,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOR,EAAE,oBAAoB;AAAA,UAC7B,cAAcA,EAAE,2BAA2B;AAAA,UAC3C,YAAU;AAAA,QAAA;AAAA,MACZ;AAAA,MAEA,gBAAAO;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOT,EAAE,kBAAkB;AAAA,UAC3B,SAAS;AAAA,YACP,EAAE,OAAO,YAAY,OAAOA,EAAE,qBAAqB,EAAE;AAAA,YACrD,EAAE,OAAO,WAAW,OAAOA,EAAE,oBAAoB,EAAE;AAAA,UAAA;AAAA,QACrD;AAAA,MAAA;AAAA,IACF,GACF;AAEJ;"}
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 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,EAAY,IAAIC,EAAiB,GACzC,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,UAAAC,EAAS,IAAIC,EAAkC;AAEvD,MAAK,EAAAN,MAAS,SAASA,MAAS,aAAcC,MAAgBM,EAAgB;AAI9E,WAAAF,EAAS,kBAAkB,EAAI,GAI3B,gBAAAG,EAAAC,GAAA,EAAA,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,MAC3C;AAAA,MAEA,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,MAC7C;AAAA,MAEA,gBAAAO;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOR,EAAE,oBAAoB;AAAA,UAC7B,cAAcA,EAAE,2BAA2B;AAAA,UAC3C,YAAU;AAAA,QAAA;AAAA,MACZ;AAAA,MAEA,gBAAAO;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAOT,EAAE,kBAAkB;AAAA,UAC3B,SAAS;AAAA,YACP,EAAE,OAAO,YAAY,OAAOA,EAAE,qBAAqB,EAAE;AAAA,YACrD,EAAE,OAAO,WAAW,OAAOA,EAAE,oBAAoB,EAAE;AAAA,UAAA;AAAA,QACrD;AAAA,MAAA;AAAA,IACF,GACF;AAEJ;"}

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

@@ -2,11 +2,12 @@ import { jsx as n } 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 "../../../shared/constants.js";
 import f from "../../Common/hooks/useNumberFormatter.js";
 import { HamburgerMenu as y } from "../../Common/HamburgerMenu/HamburgerMenu.js";
 import { useDataView as b } from "../../Common/DataView/useDataView.js";
 import { DataView as k } from "../../Common/DataView/DataView.js";
-function w() {
+function B() {
   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({
     data: r,
     columns: [
@@ -42,6 +43,6 @@ function w() {
     return /* @__PURE__ */ n(k, { label: t("bankAccountsListLabel"), ...l });
 }
 export {
-  w as BankAccountsList
+  B as BankAccountsList
 };
 //# sourceMappingURL=BankAccountsList.js.map

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

	@@ -1 +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 '@/components/Common/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,MAAcC,EAAiB,GAClF,EAAE,EAAA,IAAMC,EAAe,wBAAwB,GAC/CC,IAASC,EAAmBP,EAAc,YAAY,WAAW,aAAa,SAAS,GAEvF,EAAE,GAAGQ,EAAc,IAAIC,EAAY;AAAA,IACvC,MAAMV;AAAA,IACN,SAAS;AAAA,MACP,EAAE,KAAK,QAAQ,OAAO,EAAE,gBAAgB,EAAE;AAAA,MAC1C,EAAE,KAAK,iBAAiB,OAAO,EAAE,qBAAqB,EAAE;AAAA,MACxD,EAAE,KAAK,eAAe,OAAO,EAAE,mBAAmB,EAAE;AAAA,MACpD;AAAA,QACE,KAAK;AAAA,QACL,OAAO,EAAE,kBAAkB;AAAA,QAC3B,QAAQ,CAAeW,MACdJ;AAAA,UACLN,EAAc,QAAQ,KAAK,CAAAW,MAASA,EAAM,SAASD,EAAY,IAAI,GAAG,eAAe;AAAA,QACvF;AAAA,MACF;AAAA,IAEJ;AAAA,IACA,UAAU,CAAeA,MAErB,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,GAAY,EAAA,eAAW,GAAC,CAAA;AAAA,UAAA;AAAA,QAEnC;AAAA,QACA,cAAc,EAAE,gBAAgB;AAAA,QAChC,WAAWX;AAAA,MAAA;AAAA,IACb;AAAA,EAEJ,CACD;AAED,MAAIF,MAAS;AAEb,6BAAQc,GAAS,EAAA,OAAO,EAAE,uBAAuB,GAAI,GAAGP,GAAe;AACzE;"}
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 '@/components/Common/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,MAAcC,EAAiB,GAClF,EAAE,EAAA,IAAMC,EAAe,wBAAwB,GAC/CC,IAASC,EAAmBP,EAAc,YAAY,WAAW,aAAa,SAAS,GAEvF,EAAE,GAAGQ,EAAc,IAAIC,EAAY;AAAA,IACvC,MAAMV;AAAA,IACN,SAAS;AAAA,MACP,EAAE,KAAK,QAAQ,OAAO,EAAE,gBAAgB,EAAE;AAAA,MAC1C,EAAE,KAAK,iBAAiB,OAAO,EAAE,qBAAqB,EAAE;AAAA,MACxD,EAAE,KAAK,eAAe,OAAO,EAAE,mBAAmB,EAAE;AAAA,MACpD;AAAA,QACE,KAAK;AAAA,QACL,OAAO,EAAE,kBAAkB;AAAA,QAC3B,QAAQ,CAAeW,MACdJ;AAAA,UACLN,EAAc,QAAQ,KAAK,CAAAW,MAASA,EAAM,SAASD,EAAY,IAAI,GAAG,eAAe;AAAA,QACvF;AAAA,MACF;AAAA,IAEJ;AAAA,IACA,UAAU,CAAeA,MAErB,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,GAAY,EAAA,eAAW,GAAC,CAAA;AAAA,UAAA;AAAA,QAEnC;AAAA,QACA,cAAc,EAAE,gBAAgB;AAAA,QAChC,WAAWX;AAAA,MAAA;AAAA,IACb;AAAA,EAEJ,CACD;AAED,MAAIF,MAAS;AAEb,6BAAQc,GAAS,EAAA,OAAO,EAAE,uBAAuB,GAAI,GAAGP,GAAe;AACzE;"}

package/dist/components/Employee/PaymentMethod/PaymentMethod.js CHANGED Viewed

@@ -11,7 +11,6 @@ import { useCallback as X, useState as Z, useMemo as k, useEffect as S } from "r
 import { useForm as $, FormProvider as tt } from "react-hook-form";
 import { useTranslation as et } from "react-i18next";
 import { CombinedSchema as ot, PaymentMethodProvider as nt } from "./usePaymentMethod.js";
-import { SPLIT_BY as b, PAYMENT_METHODS as N } from "./Constants.js";
 import { BaseComponent as it } from "../../Base/Base.js";
 import { useBase as st } from "../../Base/useBase.js";
 import { Form as rt } from "../../Common/Form/Form.js";
@@ -22,7 +21,7 @@ import { Head as ut } from "./Head.js";
 import { PaymentTypeForm as pt } from "./PaymentTypeForm.js";
 import { Split as lt } from "./Split.js";
 import { useI18n as dt, useComponentDictionary as yt } from "../../../i18n/I18n.js";
-import { componentEvents as A } from "../../../shared/constants.js";
+import { SPLIT_BY as b, componentEvents as A, PAYMENT_METHODS as N } from "../../../shared/constants.js";
 import { useFlow as ht } from "../../Flow/useFlow.js";
 function At(o) {
   return /* @__PURE__ */ n(it, { ...o, children: /* @__PURE__ */ n(ft, { ...o, children: o.children }) });
@@ -155,7 +154,7 @@ const ft = ({ employeeId: o, className: f, dictionary: E }) => {
       ] }) })
     }
   ) });
-}, Vt = () => {
+}, Gt = () => {
   const { employeeId: o, onEvent: f } = ht(), { t: E } = et("common");
   if (!o)
     throw new Error(
@@ -169,6 +168,6 @@ const ft = ({ employeeId: o, className: f, dictionary: E }) => {
 };
 export {
   At as PaymentMethod,
-  Vt as PaymentMethodContextual
+  Gt as PaymentMethodContextual
 };
 //# sourceMappingURL=PaymentMethod.js.map

package/dist/components/Employee/PaymentMethod/PaymentMethod.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaymentMethod.js","sources":["../../../../src/components/Employee/PaymentMethod/PaymentMethod.tsx"],"sourcesContent":["import { zodResolver } from '@hookform/resolvers/zod'\nimport { useEmployeePaymentMethodCreateMutation } from '@gusto/embedded-api/react-query/employeePaymentMethodCreate'\nimport { useEmployeePaymentMethodDeleteBankAccountMutation } from '@gusto/embedded-api/react-query/employeePaymentMethodDeleteBankAccount'\nimport {\n useEmployeePaymentMethodsGetBankAccountsSuspense,\n invalidateAllEmployeePaymentMethodsGetBankAccounts,\n} from '@gusto/embedded-api/react-query/employeePaymentMethodsGetBankAccounts'\nimport {\n useEmployeePaymentMethodGetSuspense,\n invalidateAllEmployeePaymentMethodGet,\n} from '@gusto/embedded-api/react-query/employeePaymentMethodGet'\nimport { useEmployeePaymentMethodUpdateBankAccountMutation } from '@gusto/embedded-api/react-query/employeePaymentMethodUpdateBankAccount'\nimport { useEmployeePaymentMethodUpdateMutation } from '@gusto/embedded-api/react-query/employeePaymentMethodUpdate'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { FormProvider, useForm, type DefaultValues, type SubmitHandler } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport type { OnboardingContextInterface } from '../OnboardingFlow/OnboardingFlow'\nimport {\n CombinedSchema,\n type CombinedSchemaInputs,\n type CombinedSchemaOutputs,\n type MODE,\n PaymentMethodProvider,\n} from './usePaymentMethod'\nimport { PAYMENT_METHODS, SPLIT_BY } from './Constants'\nimport {\n useBase,\n BaseComponent,\n type BaseComponentInterface,\n type CommonComponentInterface,\n} from '@/components/Base'\nimport { Form } from '@/components/Common/Form'\nimport { Actions } from '@/components/Employee/PaymentMethod/Actions'\nimport { BankAccountForm } from '@/components/Employee/PaymentMethod/BankAccountEdit'\nimport { BankAccountsList } from '@/components/Employee/PaymentMethod/BankAccountsList'\nimport { Head } from '@/components/Employee/PaymentMethod/Head'\nimport { PaymentTypeForm } from '@/components/Employee/PaymentMethod/PaymentTypeForm'\nimport { Split } from '@/components/Employee/PaymentMethod/Split'\nimport { useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { useComponentDictionary } from '@/i18n/I18n'\n\ninterface PaymentMethodProps extends CommonComponentInterface<'Employee.PaymentMethod'> {\n employeeId: string\n defaultValues?: never\n}\n\nexport function PaymentMethod(props: PaymentMethodProps & BaseComponentInterface) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nconst Root = ({ employeeId, className, dictionary }: PaymentMethodProps) => {\n useI18n('Employee.PaymentMethod')\n useComponentDictionary('Employee.PaymentMethod', dictionary)\n const { baseSubmitHandler, onEvent } = useBase()\n const queryClient = useQueryClient()\n\n const {\n data: { employeePaymentMethod },\n } = useEmployeePaymentMethodGetSuspense({ employeeId })\n const paymentMethod = employeePaymentMethod!\n const { data: bankAccountsList } = useEmployeePaymentMethodsGetBankAccountsSuspense({\n employeeId,\n })\n const bankAccounts = bankAccountsList.employeeBankAccountList!\n const paymentMethodMutation = useEmployeePaymentMethodUpdateMutation()\n const deleteBankAccountMutation = useEmployeePaymentMethodDeleteBankAccountMutation()\n const addBankAccountMutation = useEmployeePaymentMethodCreateMutation()\n const updateBankAccountMutation = useEmployeePaymentMethodUpdateBankAccountMutation()\n\n const invalidateAll = useCallback(async () => {\n await invalidateAllEmployeePaymentMethodGet(queryClient)\n await invalidateAllEmployeePaymentMethodsGetBankAccounts(queryClient)\n }, [queryClient])\n\n const [mode, setMode] = useState<MODE>(bankAccounts.length < 1 ? 'INITIAL' : 'LIST')\n if (mode !== 'INITIAL' && bankAccounts.length < 1) {\n setMode('INITIAL')\n }\n\n const baseDefaultValues: Partial<CombinedSchemaOutputs> = useMemo(() => {\n return {\n type: 'Direct Deposit',\n isSplit: false,\n hasBankPayload: false,\n name: '',\n routingNumber: '',\n accountNumber: '',\n accountType: 'Checking',\n splitBy: undefined,\n splitAmount: {},\n priority: {},\n } as Partial<CombinedSchemaOutputs>\n }, [])\n\n const defaultValues: CombinedSchemaOutputs = useMemo(() => {\n return {\n ...baseDefaultValues,\n type: paymentMethod.type ?? 'Direct Deposit',\n splitBy: paymentMethod.splitBy ?? undefined,\n ...paymentMethod.splits?.reduce(\n (acc, { uuid, splitAmount, priority }) => ({\n splitAmount: { ...acc.splitAmount, [uuid]: splitAmount ?? null },\n priority: { ...acc.priority, [uuid]: Number(priority) },\n }),\n { splitAmount: {}, priority: {} },\n ),\n remainder:\n paymentMethod.type === 'Direct Deposit' && paymentMethod.splits\n ? paymentMethod.splits.reduce(\n (acc, curr) =>\n curr.splitAmount === null ? curr.uuid : (paymentMethod.splits?.at(-1)?.uuid ?? acc),\n '',\n )\n : undefined,\n } as CombinedSchemaOutputs\n }, [baseDefaultValues, paymentMethod.type, paymentMethod.splitBy, paymentMethod.splits])\n\n const formMethods = useForm<CombinedSchemaInputs>({\n resolver: zodResolver(CombinedSchema),\n defaultValues: defaultValues as DefaultValues<CombinedSchemaInputs>,\n })\n\n const watchedType = formMethods.watch('type')\n\n const { reset: resetForm } = formMethods\n const { mutateAsync: mutatePaymentMethod } = paymentMethodMutation\n\n useEffect(() => {\n void (async () => {\n if (paymentMethod.splits?.length === 1 && paymentMethod.type === 'Direct Deposit') {\n await mutatePaymentMethod({\n request: {\n employeeId,\n requestBody: {\n splitBy: SPLIT_BY.percentage,\n splits: paymentMethod.splits.map(split => ({\n ...split,\n splitAmount: 100,\n priority: 1,\n })),\n version: paymentMethod.version as string,\n type: 'Direct Deposit',\n },\n },\n })\n await invalidateAll()\n }\n })()\n }, [employeeId, invalidateAll, paymentMethod, queryClient, mutatePaymentMethod])\n\n useEffect(() => {\n resetForm(defaultValues)\n }, [bankAccounts.length, paymentMethod, defaultValues, resetForm])\n\n const onSubmit: SubmitHandler<CombinedSchemaInputs> = async data => {\n await baseSubmitHandler(data, async payload => {\n const { type } = payload\n if (\n type === 'Direct Deposit' &&\n payload.hasBankPayload &&\n (mode === 'ADD' \|\| mode === 'INITIAL')\n ) {\n const bankAccountResponse = await addBankAccountMutation.mutateAsync({\n request: {\n employeeId,\n requestBody: {\n name: payload.name,\n routingNumber: payload.routingNumber,\n accountNumber: payload.accountNumber,\n accountType: payload.accountType,\n },\n },\n })\n await invalidateAll()\n\n onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, bankAccountResponse)\n } else {\n //Adding bank account updates payment method\n const body =\n type === PAYMENT_METHODS.check\n ? { version: paymentMethod.version as string }\n : {\n ...paymentMethod,\n version: paymentMethod.version as string,\n splitBy: payload.isSplit\n ? payload.splitBy\n : (paymentMethod.splitBy ?? SPLIT_BY.percentage),\n splits:\n payload.isSplit && paymentMethod.splits\n ? paymentMethod.splits.map(split => ({\n ...split,\n splitAmount: payload.splitAmount[split.uuid],\n priority: payload.priority[split.uuid],\n }))\n : (paymentMethod.splits ?? []),\n }\n const paymentMethodResponse = await paymentMethodMutation.mutateAsync({\n request: { employeeId, requestBody: { ...body, type } },\n })\n await invalidateAll()\n onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED, paymentMethodResponse)\n }\n //Cleanup after submission bank/split submission\n formMethods.setValue('isSplit', false)\n formMethods.setValue('hasBankPayload', false)\n //Notify that this component is ready to proceed\n if (mode === 'LIST' \|\| type === PAYMENT_METHODS.check) {\n onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_DONE)\n } else {\n setMode('LIST')\n }\n })\n }\n\n const handleDelete = async (uuid: string) => {\n const data = await deleteBankAccountMutation.mutateAsync({\n request: { employeeId, bankAccountUuid: uuid },\n })\n await invalidateAll()\n onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_DELETED, data)\n }\n const handleAdd = () => {\n setMode('ADD')\n resetForm(defaultValues)\n }\n const handleCancel = () => {\n setMode('LIST')\n resetForm(defaultValues)\n }\n const handleSplit = () => {\n setMode('SPLIT')\n }\n\n return (\n <section className={className}>\n <PaymentMethodProvider\n value={{\n bankAccounts,\n isPending:\n deleteBankAccountMutation.isPending \|\|\n paymentMethodMutation.isPending \|\|\n addBankAccountMutation.isPending \|\|\n updateBankAccountMutation.isPending,\n watchedType,\n mode,\n paymentMethod,\n handleCancel,\n handleAdd,\n handleDelete,\n handleSplit,\n }}\n >\n <FormProvider {...formMethods}>\n <Form onSubmit={formMethods.handleSubmit(onSubmit)}>\n <Head />\n <PaymentTypeForm />\n <BankAccountsList />\n <BankAccountForm />\n <Split />\n <Actions />\n </Form>\n </FormProvider>\n </PaymentMethodProvider>\n </section>\n )\n}\n\nexport const PaymentMethodContextual = () => {\n const { employeeId, onEvent } = useFlow<OnboardingContextInterface>()\n const { t } = useTranslation('common')\n\n if (!employeeId) {\n throw new Error(\n t('errors.missingParamsOrContext', {\n component: 'PaymentMethod',\n param: 'employeeId',\n provider: 'FlowProvider',\n }),\n )\n }\n return <PaymentMethod employeeId={employeeId} onEvent={onEvent} />\n}\n"],"names":["PaymentMethod","props","jsx","BaseComponent","Root","employeeId","className","dictionary","useI18n","useComponentDictionary","baseSubmitHandler","onEvent","useBase","queryClient","useQueryClient","employeePaymentMethod","useEmployeePaymentMethodGetSuspense","paymentMethod","bankAccountsList","useEmployeePaymentMethodsGetBankAccountsSuspense","bankAccounts","paymentMethodMutation","useEmployeePaymentMethodUpdateMutation","deleteBankAccountMutation","useEmployeePaymentMethodDeleteBankAccountMutation","addBankAccountMutation","useEmployeePaymentMethodCreateMutation","updateBankAccountMutation","useEmployeePaymentMethodUpdateBankAccountMutation","invalidateAll","useCallback","invalidateAllEmployeePaymentMethodGet","invalidateAllEmployeePaymentMethodsGetBankAccounts","mode","setMode","useState","baseDefaultValues","useMemo","defaultValues","acc","uuid","splitAmount","priority","curr","formMethods","useForm","zodResolver","CombinedSchema","watchedType","resetForm","mutatePaymentMethod","useEffect","SPLIT_BY","split","onSubmit","data","payload","type","bankAccountResponse","componentEvents","body","PAYMENT_METHODS","paymentMethodResponse","handleDelete","handleAdd","handleCancel","handleSplit","PaymentMethodProvider","FormProvider","jsxs","Form","Head","PaymentTypeForm","BankAccountsList","BankAccountForm","Split","Actions","PaymentMethodContextual","useFlow","t","useTranslation"],"mappings":"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"}
1	+ {"version":3,"file":"PaymentMethod.js","sources":["../../../../src/components/Employee/PaymentMethod/PaymentMethod.tsx"],"sourcesContent":["import { zodResolver } from '@hookform/resolvers/zod'\nimport { useEmployeePaymentMethodCreateMutation } from '@gusto/embedded-api/react-query/employeePaymentMethodCreate'\nimport { useEmployeePaymentMethodDeleteBankAccountMutation } from '@gusto/embedded-api/react-query/employeePaymentMethodDeleteBankAccount'\nimport {\n useEmployeePaymentMethodsGetBankAccountsSuspense,\n invalidateAllEmployeePaymentMethodsGetBankAccounts,\n} from '@gusto/embedded-api/react-query/employeePaymentMethodsGetBankAccounts'\nimport {\n useEmployeePaymentMethodGetSuspense,\n invalidateAllEmployeePaymentMethodGet,\n} from '@gusto/embedded-api/react-query/employeePaymentMethodGet'\nimport { useEmployeePaymentMethodUpdateBankAccountMutation } from '@gusto/embedded-api/react-query/employeePaymentMethodUpdateBankAccount'\nimport { useEmployeePaymentMethodUpdateMutation } from '@gusto/embedded-api/react-query/employeePaymentMethodUpdate'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { FormProvider, useForm, type DefaultValues, type SubmitHandler } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport type { OnboardingContextInterface } from '../OnboardingFlow/OnboardingFlow'\nimport {\n CombinedSchema,\n type CombinedSchemaInputs,\n type CombinedSchemaOutputs,\n type MODE,\n PaymentMethodProvider,\n} from './usePaymentMethod'\nimport {\n useBase,\n BaseComponent,\n type BaseComponentInterface,\n type CommonComponentInterface,\n} from '@/components/Base'\nimport { Form } from '@/components/Common/Form'\nimport { Actions } from '@/components/Employee/PaymentMethod/Actions'\nimport { BankAccountForm } from '@/components/Employee/PaymentMethod/BankAccountEdit'\nimport { BankAccountsList } from '@/components/Employee/PaymentMethod/BankAccountsList'\nimport { Head } from '@/components/Employee/PaymentMethod/Head'\nimport { PaymentTypeForm } from '@/components/Employee/PaymentMethod/PaymentTypeForm'\nimport { Split } from '@/components/Employee/PaymentMethod/Split'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, PAYMENT_METHODS, SPLIT_BY } from '@/shared/constants'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { useComponentDictionary } from '@/i18n/I18n'\n\ninterface PaymentMethodProps extends CommonComponentInterface<'Employee.PaymentMethod'> {\n employeeId: string\n defaultValues?: never\n}\n\nexport function PaymentMethod(props: PaymentMethodProps & BaseComponentInterface) {\n return (\n <BaseComponent {...props}>\n <Root {...props}>{props.children}</Root>\n </BaseComponent>\n )\n}\n\nconst Root = ({ employeeId, className, dictionary }: PaymentMethodProps) => {\n useI18n('Employee.PaymentMethod')\n useComponentDictionary('Employee.PaymentMethod', dictionary)\n const { baseSubmitHandler, onEvent } = useBase()\n const queryClient = useQueryClient()\n\n const {\n data: { employeePaymentMethod },\n } = useEmployeePaymentMethodGetSuspense({ employeeId })\n const paymentMethod = employeePaymentMethod!\n const { data: bankAccountsList } = useEmployeePaymentMethodsGetBankAccountsSuspense({\n employeeId,\n })\n const bankAccounts = bankAccountsList.employeeBankAccountList!\n const paymentMethodMutation = useEmployeePaymentMethodUpdateMutation()\n const deleteBankAccountMutation = useEmployeePaymentMethodDeleteBankAccountMutation()\n const addBankAccountMutation = useEmployeePaymentMethodCreateMutation()\n const updateBankAccountMutation = useEmployeePaymentMethodUpdateBankAccountMutation()\n\n const invalidateAll = useCallback(async () => {\n await invalidateAllEmployeePaymentMethodGet(queryClient)\n await invalidateAllEmployeePaymentMethodsGetBankAccounts(queryClient)\n }, [queryClient])\n\n const [mode, setMode] = useState<MODE>(bankAccounts.length < 1 ? 'INITIAL' : 'LIST')\n if (mode !== 'INITIAL' && bankAccounts.length < 1) {\n setMode('INITIAL')\n }\n\n const baseDefaultValues: Partial<CombinedSchemaOutputs> = useMemo(() => {\n return {\n type: 'Direct Deposit',\n isSplit: false,\n hasBankPayload: false,\n name: '',\n routingNumber: '',\n accountNumber: '',\n accountType: 'Checking',\n splitBy: undefined,\n splitAmount: {},\n priority: {},\n } as Partial<CombinedSchemaOutputs>\n }, [])\n\n const defaultValues: CombinedSchemaOutputs = useMemo(() => {\n return {\n ...baseDefaultValues,\n type: paymentMethod.type ?? 'Direct Deposit',\n splitBy: paymentMethod.splitBy ?? undefined,\n ...paymentMethod.splits?.reduce(\n (acc, { uuid, splitAmount, priority }) => ({\n splitAmount: { ...acc.splitAmount, [uuid]: splitAmount ?? null },\n priority: { ...acc.priority, [uuid]: Number(priority) },\n }),\n { splitAmount: {}, priority: {} },\n ),\n remainder:\n paymentMethod.type === 'Direct Deposit' && paymentMethod.splits\n ? paymentMethod.splits.reduce(\n (acc, curr) =>\n curr.splitAmount === null ? curr.uuid : (paymentMethod.splits?.at(-1)?.uuid ?? acc),\n '',\n )\n : undefined,\n } as CombinedSchemaOutputs\n }, [baseDefaultValues, paymentMethod.type, paymentMethod.splitBy, paymentMethod.splits])\n\n const formMethods = useForm<CombinedSchemaInputs>({\n resolver: zodResolver(CombinedSchema),\n defaultValues: defaultValues as DefaultValues<CombinedSchemaInputs>,\n })\n\n const watchedType = formMethods.watch('type')\n\n const { reset: resetForm } = formMethods\n const { mutateAsync: mutatePaymentMethod } = paymentMethodMutation\n\n useEffect(() => {\n void (async () => {\n if (paymentMethod.splits?.length === 1 && paymentMethod.type === 'Direct Deposit') {\n await mutatePaymentMethod({\n request: {\n employeeId,\n requestBody: {\n splitBy: SPLIT_BY.percentage,\n splits: paymentMethod.splits.map(split => ({\n ...split,\n splitAmount: 100,\n priority: 1,\n })),\n version: paymentMethod.version as string,\n type: 'Direct Deposit',\n },\n },\n })\n await invalidateAll()\n }\n })()\n }, [employeeId, invalidateAll, paymentMethod, queryClient, mutatePaymentMethod])\n\n useEffect(() => {\n resetForm(defaultValues)\n }, [bankAccounts.length, paymentMethod, defaultValues, resetForm])\n\n const onSubmit: SubmitHandler<CombinedSchemaInputs> = async data => {\n await baseSubmitHandler(data, async payload => {\n const { type } = payload\n if (\n type === 'Direct Deposit' &&\n payload.hasBankPayload &&\n (mode === 'ADD' \|\| mode === 'INITIAL')\n ) {\n const bankAccountResponse = await addBankAccountMutation.mutateAsync({\n request: {\n employeeId,\n requestBody: {\n name: payload.name,\n routingNumber: payload.routingNumber,\n accountNumber: payload.accountNumber,\n accountType: payload.accountType,\n },\n },\n })\n await invalidateAll()\n\n onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, bankAccountResponse)\n } else {\n //Adding bank account updates payment method\n const body =\n type === PAYMENT_METHODS.check\n ? { version: paymentMethod.version as string }\n : {\n ...paymentMethod,\n version: paymentMethod.version as string,\n splitBy: payload.isSplit\n ? payload.splitBy\n : (paymentMethod.splitBy ?? SPLIT_BY.percentage),\n splits:\n payload.isSplit && paymentMethod.splits\n ? paymentMethod.splits.map(split => ({\n ...split,\n splitAmount: payload.splitAmount[split.uuid],\n priority: payload.priority[split.uuid],\n }))\n : (paymentMethod.splits ?? []),\n }\n const paymentMethodResponse = await paymentMethodMutation.mutateAsync({\n request: { employeeId, requestBody: { ...body, type } },\n })\n await invalidateAll()\n onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED, paymentMethodResponse)\n }\n //Cleanup after submission bank/split submission\n formMethods.setValue('isSplit', false)\n formMethods.setValue('hasBankPayload', false)\n //Notify that this component is ready to proceed\n if (mode === 'LIST' \|\| type === PAYMENT_METHODS.check) {\n onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_DONE)\n } else {\n setMode('LIST')\n }\n })\n }\n\n const handleDelete = async (uuid: string) => {\n const data = await deleteBankAccountMutation.mutateAsync({\n request: { employeeId, bankAccountUuid: uuid },\n })\n await invalidateAll()\n onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_DELETED, data)\n }\n const handleAdd = () => {\n setMode('ADD')\n resetForm(defaultValues)\n }\n const handleCancel = () => {\n setMode('LIST')\n resetForm(defaultValues)\n }\n const handleSplit = () => {\n setMode('SPLIT')\n }\n\n return (\n <section className={className}>\n <PaymentMethodProvider\n value={{\n bankAccounts,\n isPending:\n deleteBankAccountMutation.isPending \|\|\n paymentMethodMutation.isPending \|\|\n addBankAccountMutation.isPending \|\|\n updateBankAccountMutation.isPending,\n watchedType,\n mode,\n paymentMethod,\n handleCancel,\n handleAdd,\n handleDelete,\n handleSplit,\n }}\n >\n <FormProvider {...formMethods}>\n <Form onSubmit={formMethods.handleSubmit(onSubmit)}>\n <Head />\n <PaymentTypeForm />\n <BankAccountsList />\n <BankAccountForm />\n <Split />\n <Actions />\n </Form>\n </FormProvider>\n </PaymentMethodProvider>\n </section>\n )\n}\n\nexport const PaymentMethodContextual = () => {\n const { employeeId, onEvent } = useFlow<OnboardingContextInterface>()\n const { t } = useTranslation('common')\n\n if (!employeeId) {\n throw new Error(\n t('errors.missingParamsOrContext', {\n component: 'PaymentMethod',\n param: 'employeeId',\n provider: 'FlowProvider',\n }),\n )\n }\n return <PaymentMethod employeeId={employeeId} onEvent={onEvent} />\n}\n"],"names":["PaymentMethod","props","jsx","BaseComponent","Root","employeeId","className","dictionary","useI18n","useComponentDictionary","baseSubmitHandler","onEvent","useBase","queryClient","useQueryClient","employeePaymentMethod","useEmployeePaymentMethodGetSuspense","paymentMethod","bankAccountsList","useEmployeePaymentMethodsGetBankAccountsSuspense","bankAccounts","paymentMethodMutation","useEmployeePaymentMethodUpdateMutation","deleteBankAccountMutation","useEmployeePaymentMethodDeleteBankAccountMutation","addBankAccountMutation","useEmployeePaymentMethodCreateMutation","updateBankAccountMutation","useEmployeePaymentMethodUpdateBankAccountMutation","invalidateAll","useCallback","invalidateAllEmployeePaymentMethodGet","invalidateAllEmployeePaymentMethodsGetBankAccounts","mode","setMode","useState","baseDefaultValues","useMemo","defaultValues","acc","uuid","splitAmount","priority","curr","formMethods","useForm","zodResolver","CombinedSchema","watchedType","resetForm","mutatePaymentMethod","useEffect","SPLIT_BY","split","onSubmit","data","payload","type","bankAccountResponse","componentEvents","body","PAYMENT_METHODS","paymentMethodResponse","handleDelete","handleAdd","handleCancel","handleSplit","PaymentMethodProvider","FormProvider","jsxs","Form","Head","PaymentTypeForm","BankAccountsList","BankAccountForm","Split","Actions","PaymentMethodContextual","useFlow","t","useTranslation"],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import { jsx as r } from "react/jsx-runtime";
 import { useTranslation as p } from "react-i18next";
 import { z as o } from "zod";
 import { usePaymentMethod as m } from "./usePaymentMethod.js";
-import { PAYMENT_METHODS as i } from "./Constants.js";
+import { PAYMENT_METHODS as i } from "../../../shared/constants.js";
 import { RadioGroupField as n } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
 o.object({
   type: o.enum(["Check", "Direct Deposit"])

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

	@@ -1 +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 { ~~PAYMENT_METHODS~~ } from '~~./Constants~~'\nimport { ~~RadioGroupField~~ } from '@/~~components~~/~~Common~~'\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 } = 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: t('directDepositDescription'),\n },\n {\n value: PAYMENT_METHODS.check,\n label: t('checkLabel'),\n description: t('checkDescription'),\n },\n ]}\n />\n )\n}\n"],"names":["z","PaymentTypeForm","mode","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;AAC1B,QAAA,EAAE,MAAAC,EAAK,IAAIC,EAAiB,GAC5B,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB;AACjD,MAAA,EAAAH,MAAS,aAAaA,MAAS;AAEjC,WAAA,gBAAAI;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,aAAaA,EAAE,0BAA0B;AAAA,UAC3C;AAAA,UACA;AAAA,YACE,OAAOI,EAAgB;AAAA,YACvB,OAAOJ,EAAE,YAAY;AAAA,YACrB,aAAaA,EAAE,kBAAkB;AAAA,UAAA;AAAA,QACnC;AAAA,MACF;AAAA,IACF;AAEJ;"}
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 } = 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: t('directDepositDescription'),\n },\n {\n value: PAYMENT_METHODS.check,\n label: t('checkLabel'),\n description: t('checkDescription'),\n },\n ]}\n />\n )\n}\n"],"names":["z","PaymentTypeForm","mode","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;AAC1B,QAAA,EAAE,MAAAC,EAAK,IAAIC,EAAiB,GAC5B,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB;AACjD,MAAA,EAAAH,MAAS,aAAaA,MAAS;AAEjC,WAAA,gBAAAI;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,aAAaA,EAAE,0BAA0B;AAAA,UAC3C;AAAA,UACA;AAAA,YACE,OAAOI,EAAgB;AAAA,YACvB,OAAOJ,EAAE,YAAY;AAAA,YACrB,aAAaA,EAAE,kBAAkB;AAAA,UAAA;AAAA,QACnC;AAAA,MACF;AAAA,IACF;AAEJ;"}