@gusto/embedded-react-sdk 0.41.0 → 0.43.0

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

@@ -1 +1 @@
-{"version":3,"file":"onboardingStateMachine.js","sources":["../../../../src/components/Contractor/OnboardingFlow/onboardingStateMachine.ts"],"sourcesContent":["import { transition, reduce, state, guard } from 'robot3'\nimport {\n  AddressContextual,\n  ContractorListContextual,\n  NewHireReportContextual,\n  PaymentMethodContextual,\n  ProfileContextual,\n  SubmitContextual,\n  type OnboardingFlowContextInterface,\n} from './OnboardingFlowComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\n\ntype EventPayloads = {\n  [componentEvents.CONTRACTOR_UPDATE]: {\n    contractorId: string\n  }\n  [componentEvents.CONTRACTOR_PROFILE_DONE]: { contractorId: string; selfOnboarding: boolean }\n  [componentEvents.CONTRACTOR_SUBMIT_DONE]: { message?: string }\n}\n\nconst createReducer = (props: Partial<OnboardingFlowContextInterface>) => {\n  return (ctx: OnboardingFlowContextInterface): OnboardingFlowContextInterface => ({\n    ...ctx,\n    ...props,\n  })\n}\nconst cancelTransition = () =>\n  transition(\n    componentEvents.CANCEL,\n    'list',\n    reduce(\n      createReducer({\n        component: ContractorListContextual,\n        progressBarType: null,\n        currentStep: 0,\n        contractorId: undefined,\n        successMessage: undefined,\n      }),\n    ),\n  )\n\nexport const onboardingMachine = {\n  list: state<MachineTransition>(\n    transition(\n      componentEvents.CONTRACTOR_CREATE,\n      'profile',\n      reduce(\n        createReducer({\n          component: ProfileContextual,\n          currentStep: 1,\n          progressBarType: 'progress',\n          contractorId: undefined,\n          successMessage: undefined,\n        }),\n      ),\n    ),\n    transition(\n      componentEvents.CONTRACTOR_UPDATE,\n      'profile',\n      reduce(\n        (\n          ctx: OnboardingFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_UPDATE>,\n        ): OnboardingFlowContextInterface => {\n          return {\n            ...ctx,\n            component: ProfileContextual,\n            currentStep: 1,\n            progressBarType: 'progress',\n            contractorId: ev.payload.contractorId,\n            successMessage: undefined,\n          }\n        },\n      ),\n    ),\n  ),\n  profile: state<MachineTransition>(\n    cancelTransition(),\n    transition(\n      componentEvents.CONTRACTOR_PROFILE_DONE,\n      'address',\n      reduce(\n        (\n          ctx: OnboardingFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_PROFILE_DONE>,\n        ): OnboardingFlowContextInterface => {\n          return {\n            ...ctx,\n            component: AddressContextual,\n            currentStep: 2,\n            contractorId: ev.payload.contractorId,\n            selfOnboarding: ev.payload.selfOnboarding,\n          }\n        },\n      ),\n      guard((ctx, ev) => !ev.payload.selfOnboarding), // Only allow transition to address if not self-onboarding\n    ),\n    transition(\n      componentEvents.CONTRACTOR_PROFILE_DONE,\n      'newHireReport',\n      reduce(\n        (\n          ctx: OnboardingFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_PROFILE_DONE>,\n        ): OnboardingFlowContextInterface => {\n          return {\n            ...ctx,\n            component: NewHireReportContextual,\n            contractorId: ev.payload.contractorId,\n            selfOnboarding: ev.payload.selfOnboarding,\n            currentStep: 2,\n            totalSteps: 3,\n          }\n        },\n      ),\n      guard((ctx, ev) => ev.payload.selfOnboarding), // Only allow transition to new hire report if self-onboarding\n    ),\n  ),\n  address: state<MachineTransition>(\n    cancelTransition(),\n    transition(\n      componentEvents.CONTRACTOR_ADDRESS_DONE,\n      'paymentMethod',\n      reduce(createReducer({ component: PaymentMethodContextual, currentStep: 3 })),\n    ),\n  ),\n  paymentMethod: state<MachineTransition>(\n    cancelTransition(),\n    transition(\n      componentEvents.CONTRACTOR_PAYMENT_METHOD_DONE,\n      'newHireReport',\n      reduce(\n        createReducer({\n          component: NewHireReportContextual,\n          currentStep: 4,\n        }),\n      ),\n    ),\n  ),\n  newHireReport: state<MachineTransition>(\n    cancelTransition(),\n    transition(\n      componentEvents.CONTRACTOR_NEW_HIRE_REPORT_DONE,\n      'submit',\n      reduce(\n        createReducer({\n          component: SubmitContextual,\n          currentStep: 5,\n        }),\n      ),\n    ),\n  ),\n  submit: state<MachineTransition>(\n    cancelTransition(),\n    transition(\n      componentEvents.CONTRACTOR_SUBMIT_DONE,\n      'list',\n      reduce(\n        (\n          ctx: OnboardingFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_SUBMIT_DONE>,\n        ): OnboardingFlowContextInterface => {\n          return {\n            ...ctx,\n            component: ContractorListContextual,\n            currentStep: 0,\n            progressBarType: null,\n            successMessage: ev.payload.message,\n          }\n        },\n      ),\n    ),\n  ),\n  final: state<MachineTransition>(),\n}\n"],"names":["createReducer","props","ctx","cancelTransition","transition","componentEvents","reduce","ContractorListContextual","onboardingMachine","state","ProfileContextual","ev","AddressContextual","guard","NewHireReportContextual","PaymentMethodContextual","SubmitContextual"],"mappings":"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"}
+{"version":3,"file":"onboardingStateMachine.js","sources":["../../../../src/components/Contractor/OnboardingFlow/onboardingStateMachine.ts"],"sourcesContent":["import { transition, reduce, state, guard } from 'robot3'\nimport {\n  AddressContextual,\n  ContractorListContextual,\n  NewHireReportContextual,\n  PaymentMethodContextual,\n  ProfileContextual,\n  ProgressBarCta,\n  SubmitContextual,\n  type OnboardingFlowContextInterface,\n} from './OnboardingFlowComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\nimport type { FlowHeaderConfig } from '@/components/Flow/useFlow'\n\ntype EventPayloads = {\n  [componentEvents.CONTRACTOR_UPDATE]: {\n    contractorId: string\n  }\n  [componentEvents.CONTRACTOR_PROFILE_DONE]: { contractorId: string; selfOnboarding: boolean }\n  [componentEvents.CONTRACTOR_SUBMIT_DONE]: { message?: string }\n}\n\nconst TOTAL_STEPS_DEFAULT = 5\nconst TOTAL_STEPS_SELF_ONBOARDING = 3\n\nconst progressHeader = (\n  currentStep: number,\n  totalSteps: number = TOTAL_STEPS_DEFAULT,\n): FlowHeaderConfig => ({\n  type: 'progress',\n  currentStep,\n  totalSteps,\n  cta: ProgressBarCta,\n})\n\nconst createReducer = (props: Partial<OnboardingFlowContextInterface>) => {\n  return (ctx: OnboardingFlowContextInterface): OnboardingFlowContextInterface => ({\n    ...ctx,\n    ...props,\n  })\n}\n\nconst cancelTransition = () =>\n  transition(\n    componentEvents.CANCEL,\n    'list',\n    reduce(\n      createReducer({\n        component: ContractorListContextual,\n        header: null,\n        contractorId: undefined,\n        successMessage: undefined,\n      }),\n    ),\n  )\n\nexport const onboardingMachine = {\n  list: state<MachineTransition>(\n    transition(\n      componentEvents.CONTRACTOR_CREATE,\n      'profile',\n      reduce(\n        createReducer({\n          component: ProfileContextual,\n          header: progressHeader(1),\n          contractorId: undefined,\n          successMessage: undefined,\n        }),\n      ),\n    ),\n    transition(\n      componentEvents.CONTRACTOR_UPDATE,\n      'profile',\n      reduce(\n        (\n          ctx: OnboardingFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_UPDATE>,\n        ): OnboardingFlowContextInterface => {\n          return {\n            ...ctx,\n            component: ProfileContextual,\n            header: progressHeader(1),\n            contractorId: ev.payload.contractorId,\n            successMessage: undefined,\n          }\n        },\n      ),\n    ),\n  ),\n  profile: state<MachineTransition>(\n    cancelTransition(),\n    transition(\n      componentEvents.CONTRACTOR_PROFILE_DONE,\n      'address',\n      reduce(\n        (\n          ctx: OnboardingFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_PROFILE_DONE>,\n        ): OnboardingFlowContextInterface => {\n          return {\n            ...ctx,\n            component: AddressContextual,\n            header: progressHeader(2),\n            contractorId: ev.payload.contractorId,\n            selfOnboarding: ev.payload.selfOnboarding,\n          }\n        },\n      ),\n      guard((ctx, ev) => !ev.payload.selfOnboarding),\n    ),\n    transition(\n      componentEvents.CONTRACTOR_PROFILE_DONE,\n      'newHireReport',\n      reduce(\n        (\n          ctx: OnboardingFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_PROFILE_DONE>,\n        ): OnboardingFlowContextInterface => {\n          return {\n            ...ctx,\n            component: NewHireReportContextual,\n            header: progressHeader(2, TOTAL_STEPS_SELF_ONBOARDING),\n            contractorId: ev.payload.contractorId,\n            selfOnboarding: ev.payload.selfOnboarding,\n          }\n        },\n      ),\n      guard((ctx, ev) => ev.payload.selfOnboarding),\n    ),\n  ),\n  address: state<MachineTransition>(\n    cancelTransition(),\n    transition(\n      componentEvents.CONTRACTOR_ADDRESS_DONE,\n      'paymentMethod',\n      reduce(createReducer({ component: PaymentMethodContextual, header: progressHeader(3) })),\n    ),\n  ),\n  paymentMethod: state<MachineTransition>(\n    cancelTransition(),\n    transition(\n      componentEvents.CONTRACTOR_PAYMENT_METHOD_DONE,\n      'newHireReport',\n      reduce(\n        createReducer({\n          component: NewHireReportContextual,\n          header: progressHeader(4),\n        }),\n      ),\n    ),\n  ),\n  newHireReport: state<MachineTransition>(\n    cancelTransition(),\n    transition(\n      componentEvents.CONTRACTOR_NEW_HIRE_REPORT_DONE,\n      'submit',\n      reduce(\n        createReducer({\n          component: SubmitContextual,\n          header: progressHeader(5),\n        }),\n      ),\n    ),\n  ),\n  submit: state<MachineTransition>(\n    cancelTransition(),\n    transition(\n      componentEvents.CONTRACTOR_SUBMIT_DONE,\n      'list',\n      reduce(\n        (\n          ctx: OnboardingFlowContextInterface,\n          ev: MachineEventType<EventPayloads, typeof componentEvents.CONTRACTOR_SUBMIT_DONE>,\n        ): OnboardingFlowContextInterface => {\n          return {\n            ...ctx,\n            component: ContractorListContextual,\n            header: null,\n            successMessage: ev.payload.message,\n          }\n        },\n      ),\n    ),\n  ),\n  final: state<MachineTransition>(),\n}\n"],"names":["TOTAL_STEPS_DEFAULT","TOTAL_STEPS_SELF_ONBOARDING","progressHeader","currentStep","totalSteps","ProgressBarCta","createReducer","props","ctx","cancelTransition","transition","componentEvents","reduce","ContractorListContextual","onboardingMachine","state","ProfileContextual","ev","AddressContextual","guard","NewHireReportContextual","PaymentMethodContextual","SubmitContextual"],"mappings":"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"}

package/dist/components/Contractor/PaymentMethod/BankAccountForm.js

@@ -1,14 +1,14 @@
-import { jsxs as o, Fragment as n, jsx as r } from "react/jsx-runtime";
-import { useTranslation as t } from "react-i18next";
-import "../../../shared/constants.js";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { useTranslation as n } from "react-i18next";
+import { Flex as t } from "../../Common/Flex/Flex.js";
 import "classnames";
-import { TextInputField as a } from "../../Common/Fields/TextInputField/TextInputField.js";
+import { TextInputField as o } from "../../Common/Fields/TextInputField/TextInputField.js";
 import { RadioGroupField as i } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
 function d({ bankAccount: u }) {
-  const { t: e } = t("Contractor.PaymentMethod", { keyPrefix: "bankAccountForm" });
-  return /* @__PURE__ */ o(n, { children: [
+  const { t: e } = n("Contractor.PaymentMethod", { keyPrefix: "bankAccountForm" });
+  return /* @__PURE__ */ a(t, { gap: 20, flexDirection: "column", children: [
     /* @__PURE__ */ r(
-      a,
+      o,
       {
         name: "name",
         isRequired: !0,
@@ -17,7 +17,7 @@ function d({ bankAccount: u }) {
       }
     ),
     /* @__PURE__ */ r(
-      a,
+      o,
       {
         name: "routingNumber",
         label: e("routingNumberLabel"),
@@ -27,7 +27,7 @@ function d({ bankAccount: u }) {
       }
     ),
     /* @__PURE__ */ r(
-      a,
+      o,
       {
         name: "accountNumber",
         label: e("accountNumberLabel"),

package/dist/components/Contractor/PaymentMethod/BankAccountForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BankAccountForm.js","sources":["../../../../src/components/Contractor/PaymentMethod/BankAccountForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { BankAccountFormProps } from './types'\nimport { RadioGroupField, TextInputField } from '@/components/Common'\n\nexport function BankAccountForm({ bankAccount }: BankAccountFormProps) {\n  const { t } = useTranslation('Contractor.PaymentMethod', { keyPrefix: 'bankAccountForm' })\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","bankAccount","t","useTranslation","jsxs","Fragment","jsx","TextInputField","RadioGroupField"],"mappings":";;;;;;AAIO,SAASA,EAAgB,EAAE,aAAAC,KAAqC;AACrE,QAAM,EAAE,GAAAC,MAAMC,EAAe,4BAA4B,EAAE,WAAW,mBAAmB;AAEzF,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAOL,EAAE,WAAW;AAAA,QACpB,cAAcA,EAAE,yBAAyB;AAAA,MAAA;AAAA,IAAA;AAAA,IAG3C,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOL,EAAE,oBAAoB;AAAA,QAC7B,YAAU;AAAA,QACV,aAAaA,EAAE,0BAA0B;AAAA,QACzC,cAAcA,EAAE,2BAA2B;AAAA,MAAA;AAAA,IAAA;AAAA,IAG7C,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOL,EAAE,oBAAoB;AAAA,QAC7B,cAAcA,EAAE,2BAA2B;AAAA,QAC3C,YAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGZ,gBAAAI;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAON,EAAE,kBAAkB;AAAA,QAC3B,SAAS;AAAA,UACP,EAAE,OAAO,YAAY,OAAOA,EAAE,qBAAqB,EAAA;AAAA,UACnD,EAAE,OAAO,WAAW,OAAOA,EAAE,oBAAoB,EAAA;AAAA,QAAE;AAAA,MACrD;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"BankAccountForm.js","sources":["../../../../src/components/Contractor/PaymentMethod/BankAccountForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { BankAccountFormProps } from './types'\nimport { Flex, RadioGroupField, TextInputField } from '@/components/Common'\n\nexport function BankAccountForm({ bankAccount }: BankAccountFormProps) {\n  const { t } = useTranslation('Contractor.PaymentMethod', { keyPrefix: 'bankAccountForm' })\n\n  return (\n    <Flex gap={20} flexDirection={'column'}>\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    </Flex>\n  )\n}\n"],"names":["BankAccountForm","bankAccount","t","useTranslation","jsxs","Flex","jsx","TextInputField","RadioGroupField"],"mappings":";;;;;;AAIO,SAASA,EAAgB,EAAE,aAAAC,KAAqC;AACrE,QAAM,EAAE,GAAAC,MAAMC,EAAe,4BAA4B,EAAE,WAAW,mBAAmB;AAEzF,SACE,gBAAAC,EAACC,GAAA,EAAK,KAAK,IAAI,eAAe,UAC5B,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAOL,EAAE,WAAW;AAAA,QACpB,cAAcA,EAAE,yBAAyB;AAAA,MAAA;AAAA,IAAA;AAAA,IAG3C,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOL,EAAE,oBAAoB;AAAA,QAC7B,YAAU;AAAA,QACV,aAAaA,EAAE,0BAA0B;AAAA,QACzC,cAAcA,EAAE,2BAA2B;AAAA,MAAA;AAAA,IAAA;AAAA,IAG7C,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOL,EAAE,oBAAoB;AAAA,QAC7B,cAAcA,EAAE,2BAA2B;AAAA,QAC3C,YAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGZ,gBAAAI;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAON,EAAE,kBAAkB;AAAA,QAC3B,SAAS;AAAA,UACP,EAAE,OAAO,YAAY,OAAOA,EAAE,qBAAqB,EAAA;AAAA,UACnD,EAAE,OAAO,WAAW,OAAOA,EAAE,oBAAoB,EAAA;AAAA,QAAE;AAAA,MACrD;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/Contractor/PaymentMethod/PaymentMethod.js

@@ -1,4 +1,4 @@
-import { jsx as t, jsxs as H } from "react/jsx-runtime";
+import { jsx as e, jsxs as H } from "react/jsx-runtime";
 import { useTranslation as j } from "react-i18next";
 import { useForm as G, useWatch as Q, FormProvider as V } from "react-hook-form";
 import { useContractorPaymentMethodGetSuspense as Y, buildContractorPaymentMethodGetQuery as z } from "@gusto/embedded-api/react-query/contractorPaymentMethodGet";
@@ -36,7 +36,7 @@ const pt = n.discriminatedUnion("type", [
   })
 ]);
 function jt(o) {
-  return /* @__PURE__ */ t(rt, { ...o, children: /* @__PURE__ */ t(yt, { ...o, children: o.children }) });
+  return /* @__PURE__ */ e(rt, { ...o, children: /* @__PURE__ */ e(yt, { ...o, children: o.children }) });
 }
 function yt({ contractorId: o, className: P, dictionary: C }) {
   ot("Contractor.PaymentMethod", C), nt("Contractor.PaymentMethod");
@@ -48,15 +48,15 @@ function yt({ contractorId: o, className: P, dictionary: C }) {
     data: { contractorBankAccountList: E }
   } = L({
     contractorUuid: o
-  }), e = E?.[0] || void 0, { mutateAsync: k, isPending: R } = Z(), { mutateAsync: v, isPending: B } = K(), O = J(
+  }), t = E?.[0] || void 0, { mutateAsync: k, isPending: R } = Z(), { mutateAsync: v, isPending: B } = K(), O = J(
     () => ({
       type: i.type || m.check,
-      name: e?.name || "",
-      routingNumber: e?.routingNumber || "",
-      accountNumber: e?.hiddenAccountNumber || "",
-      accountType: e?.accountType || "Checking"
+      name: t?.name || "",
+      routingNumber: t?.routingNumber || "",
+      accountNumber: t?.hiddenAccountNumber || "",
+      accountType: t?.accountType || "Checking"
     }),
-    [i, e]
+    [i, t]
   ), r = G({
     resolver: X(pt),
     defaultValues: O
@@ -65,7 +65,7 @@ function yt({ contractorId: o, className: P, dictionary: C }) {
       let y;
       if (c.type === m.directDeposit) {
         const { name: h, accountNumber: f, routingNumber: l, accountType: M } = c;
-        if ((h !== e?.name || l !== e.routingNumber || M !== e.accountType || f !== e.hiddenAccountNumber) && !dt.safeParse(c.accountNumber).success) {
+        if ((h !== t?.name || l !== t.routingNumber || M !== t.accountType || f !== t.hiddenAccountNumber) && !dt.safeParse(c.accountNumber).success) {
           r.setError("accountNumber", { type: "validate" });
           return;
         }
@@ -96,12 +96,11 @@ function yt({ contractorId: o, className: P, dictionary: C }) {
       a(s.CONTRACTOR_PAYMENT_METHOD_UPDATED, F), a(s.CONTRACTOR_PAYMENT_METHOD_DONE);
     });
   }, U = S === m.directDeposit;
-  return /* @__PURE__ */ t("section", { className: P, children: /* @__PURE__ */ t(V, { ...r, children: /* @__PURE__ */ t(it, { onSubmit: r.handleSubmit(_), children: /* @__PURE__ */ H(st, { gap: 32, flexDirection: "column", children: [
-    /* @__PURE__ */ t(d.Heading, { as: "h2", children: u("title") }),
-    /* @__PURE__ */ t(et, {}),
-    /* @__PURE__ */ t("hr", {}),
-    U && /* @__PURE__ */ t(tt, { bankAccount: e }),
-    /* @__PURE__ */ t(mt, { children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ e("section", { className: P, children: /* @__PURE__ */ e(V, { ...r, children: /* @__PURE__ */ e(it, { onSubmit: r.handleSubmit(_), children: /* @__PURE__ */ H(st, { gap: 32, flexDirection: "column", children: [
+    /* @__PURE__ */ e(d.Heading, { as: "h2", children: u("title") }),
+    /* @__PURE__ */ e(et, {}),
+    U && /* @__PURE__ */ e(tt, { bankAccount: t }),
+    /* @__PURE__ */ e(mt, { children: /* @__PURE__ */ e(
       d.Button,
       {
         type: "submit",

package/dist/components/Contractor/PaymentMethod/PaymentMethod.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethod.js","sources":["../../../../src/components/Contractor/PaymentMethod/PaymentMethod.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { SubmitHandler } from 'react-hook-form'\nimport { FormProvider, useForm, useWatch } from 'react-hook-form'\nimport { useContractorPaymentMethodGetSuspense } from '@gusto/embedded-api/react-query/contractorPaymentMethodGet'\nimport { useContractorPaymentMethodGetBankAccountsSuspense } from '@gusto/embedded-api/react-query/contractorPaymentMethodGetBankAccounts'\nimport { useContractorPaymentMethodsCreateBankAccountMutation } from '@gusto/embedded-api/react-query/contractorPaymentMethodsCreateBankAccount'\nimport { useMemo, useState } from 'react'\nimport z from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useContractorPaymentMethodUpdateMutation } from '@gusto/embedded-api/react-query/contractorPaymentMethodUpdate'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { buildContractorPaymentMethodGetQuery } from '@gusto/embedded-api/react-query/contractorPaymentMethodGet'\nimport { useGustoEmbeddedContext } from '@gusto/embedded-api/react-query/_context'\nimport type { PaymentMethodProps } from './types'\nimport { BankAccountForm } from './BankAccountForm'\nimport { PaymentTypeForm } from './PaymentTypeForm'\nimport { useI18n } from '@/i18n'\nimport { BaseComponent, useBase } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Form } from '@/components/Common/Form'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { componentEvents, PAYMENT_METHODS } from '@/shared/constants'\nimport { ActionsLayout } from '@/components/Common/ActionsLayout'\nimport { Flex } from '@/components/Common'\nimport { accountNumberValidation, routingNumberValidation } from '@/helpers/validations'\n\nconst PaymentMethodSchema = z.discriminatedUnion('type', [\n  z.object({\n    type: z.literal('Direct Deposit'),\n    name: z.string().min(1),\n    routingNumber: routingNumberValidation,\n    accountNumber: z.any(), //Explicitely setting account number as most permissive\n    accountType: z.enum(['Checking', 'Savings']),\n  }),\n  z.object({\n    type: z.literal('Check'),\n  }),\n])\n\nexport type PaymentMethodSchemaInputs = z.input<typeof PaymentMethodSchema>\nexport type PaymentMethodSchemaOutputs = z.output<typeof PaymentMethodSchema>\n\nexport function PaymentMethod(props: PaymentMethodProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nfunction Root({ contractorId, className, dictionary }: PaymentMethodProps) {\n  useComponentDictionary('Contractor.PaymentMethod', dictionary)\n  useI18n('Contractor.PaymentMethod')\n  const { t } = useTranslation('Contractor.PaymentMethod')\n  const { onEvent, baseSubmitHandler } = useBase()\n  const Components = useComponentContext()\n  const queryClient = useQueryClient()\n  const gustoClient = useGustoEmbeddedContext()\n  const [isPaymentMethodPending, setIsPaymentMethodPending] = useState(false)\n\n  const contractorPaymentMethod = useContractorPaymentMethodGetSuspense({\n    contractorUuid: contractorId,\n  })\n\n  const getPaymentMethodQuery = buildContractorPaymentMethodGetQuery(gustoClient, {\n    contractorUuid: contractorId,\n  })\n\n  const paymentMethod = contractorPaymentMethod.data.contractorPaymentMethod!\n\n  const {\n    data: { contractorBankAccountList },\n  } = useContractorPaymentMethodGetBankAccountsSuspense({\n    contractorUuid: contractorId,\n  })\n  const bankAccount = contractorBankAccountList?.[0] || undefined\n\n  const { mutateAsync: updatePaymentMethod, isPending: paymentMethodPending } =\n    useContractorPaymentMethodUpdateMutation()\n  const { mutateAsync: createBankAccount, isPending: bankAccountPending } =\n    useContractorPaymentMethodsCreateBankAccountMutation()\n\n  const defaultValues = useMemo(\n    () => ({\n      type: paymentMethod.type || PAYMENT_METHODS.check,\n      name: bankAccount?.name || '',\n      routingNumber: bankAccount?.routingNumber || '',\n      accountNumber: bankAccount?.hiddenAccountNumber || '',\n      accountType: bankAccount?.accountType || 'Checking',\n    }),\n    [paymentMethod, bankAccount],\n  )\n\n  const formMethods = useForm({\n    resolver: zodResolver(PaymentMethodSchema),\n    defaultValues: defaultValues,\n  })\n\n  const watchedType = useWatch({ control: formMethods.control, name: 'type' })\n  const onSubmit: SubmitHandler<PaymentMethodSchemaInputs> = async data => {\n    await baseSubmitHandler(data, async payload => {\n      let updatedPaymentMethodVersion: string | undefined\n      if (payload.type === PAYMENT_METHODS.directDeposit) {\n        /** Custom validation logic for accountNumber - because masked account value is used as default value, it is only validated when any of the bank-related fields are modified*/\n        const { name, accountNumber, routingNumber, accountType } = payload\n        if (\n          name !== bankAccount?.name ||\n          routingNumber !== bankAccount.routingNumber ||\n          accountType !== bankAccount.accountType ||\n          accountNumber !== bankAccount.hiddenAccountNumber\n        ) {\n          const res = accountNumberValidation.safeParse(payload.accountNumber)\n          if (!res.success) {\n            formMethods.setError('accountNumber', { type: 'validate' })\n            return\n          }\n        }\n\n        const bankAccountResponse = await createBankAccount({\n          request: {\n            contractorUuid: contractorId,\n            requestBody: {\n              name,\n              routingNumber,\n              accountNumber,\n              accountType,\n            },\n          },\n        })\n\n        onEvent(componentEvents.CONTRACTOR_BANK_ACCOUNT_CREATED, bankAccountResponse)\n\n        // We have to fetch the updated payment method imperatively here because updating the bank\n        // account will cause the payment method version to update. This ensures we have the latest version.\n        setIsPaymentMethodPending(true)\n        const updatedPaymentMethodResponse = await queryClient.fetchQuery(getPaymentMethodQuery)\n        const updatedPaymentMethod = updatedPaymentMethodResponse.contractorPaymentMethod!\n        setIsPaymentMethodPending(false)\n\n        updatedPaymentMethodVersion = updatedPaymentMethod.version as string\n      }\n      // For check payment method, no bank account creation needed\n      const paymentMethodResponse = await updatePaymentMethod({\n        request: {\n          contractorUuid: contractorId,\n          requestBody: {\n            type: payload.type,\n            version: updatedPaymentMethodVersion || (paymentMethod.version as string),\n          },\n        },\n      })\n      onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_UPDATED, paymentMethodResponse)\n      onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_DONE)\n    })\n  }\n\n  const showBankAccountForm = watchedType === PAYMENT_METHODS.directDeposit\n\n  return (\n    <section className={className}>\n      <FormProvider {...formMethods}>\n        <Form onSubmit={formMethods.handleSubmit(onSubmit)}>\n          <Flex gap={32} flexDirection={'column'}>\n            <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n            <PaymentTypeForm />\n            <hr />\n            {showBankAccountForm && <BankAccountForm bankAccount={bankAccount} />}\n            <ActionsLayout>\n              <Components.Button\n                type=\"submit\"\n                variant=\"primary\"\n                isDisabled={paymentMethodPending || bankAccountPending || isPaymentMethodPending}\n              >\n                {t('continueCta')}\n              </Components.Button>\n            </ActionsLayout>\n          </Flex>\n        </Form>\n      </FormProvider>\n    </section>\n  )\n}\n"],"names":["PaymentMethodSchema","z","routingNumberValidation","PaymentMethod","props","jsx","BaseComponent","Root","contractorId","className","dictionary","useComponentDictionary","useI18n","t","useTranslation","onEvent","baseSubmitHandler","useBase","Components","useComponentContext","queryClient","useQueryClient","gustoClient","useGustoEmbeddedContext","isPaymentMethodPending","setIsPaymentMethodPending","useState","contractorPaymentMethod","useContractorPaymentMethodGetSuspense","getPaymentMethodQuery","buildContractorPaymentMethodGetQuery","paymentMethod","contractorBankAccountList","useContractorPaymentMethodGetBankAccountsSuspense","bankAccount","updatePaymentMethod","paymentMethodPending","useContractorPaymentMethodUpdateMutation","createBankAccount","bankAccountPending","useContractorPaymentMethodsCreateBankAccountMutation","defaultValues","useMemo","PAYMENT_METHODS","formMethods","useForm","zodResolver","watchedType","useWatch","onSubmit","data","payload","updatedPaymentMethodVersion","name","accountNumber","routingNumber","accountType","accountNumberValidation","bankAccountResponse","componentEvents","updatedPaymentMethod","paymentMethodResponse","showBankAccountForm","FormProvider","Form","jsxs","Flex","PaymentTypeForm","BankAccountForm","ActionsLayout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,KAAsBC,EAAE,mBAAmB,QAAQ;AAAA,EACvDA,EAAE,OAAO;AAAA,IACP,MAAMA,EAAE,QAAQ,gBAAgB;AAAA,IAChC,MAAMA,EAAE,SAAS,IAAI,CAAC;AAAA,IACtB,eAAeC;AAAA,IACf,eAAeD,EAAE,IAAA;AAAA;AAAA,IACjB,aAAaA,EAAE,KAAK,CAAC,YAAY,SAAS,CAAC;AAAA,EAAA,CAC5C;AAAA,EACDA,EAAE,OAAO;AAAA,IACP,MAAMA,EAAE,QAAQ,OAAO;AAAA,EAAA,CACxB;AACH,CAAC;AAKM,SAASE,GAAcC,GAA2B;AACvD,SACE,gBAAAC,EAACC,IAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,MAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,SAASG,GAAK,EAAE,cAAAC,GAAc,WAAAC,GAAW,YAAAC,KAAkC;AACzE,EAAAC,GAAuB,4BAA4BD,CAAU,GAC7DE,GAAQ,0BAA0B;AAClC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,0BAA0B,GACjD,EAAE,SAAAC,GAAS,mBAAAC,EAAA,IAAsBC,GAAA,GACjCC,IAAaC,GAAA,GACbC,IAAcC,EAAA,GACdC,IAAcC,EAAA,GACd,CAACC,GAAwBC,CAAyB,IAAIC,EAAS,EAAK,GAEpEC,IAA0BC,EAAsC;AAAA,IACpE,gBAAgBpB;AAAA,EAAA,CACjB,GAEKqB,IAAwBC,EAAqCR,GAAa;AAAA,IAC9E,gBAAgBd;AAAA,EAAA,CACjB,GAEKuB,IAAgBJ,EAAwB,KAAK,yBAE7C;AAAA,IACJ,MAAM,EAAE,2BAAAK,EAAA;AAAA,EAA0B,IAChCC,EAAkD;AAAA,IACpD,gBAAgBzB;AAAA,EAAA,CACjB,GACK0B,IAAcF,IAA4B,CAAC,KAAK,QAEhD,EAAE,aAAaG,GAAqB,WAAWC,EAAA,IACnDC,EAAA,GACI,EAAE,aAAaC,GAAmB,WAAWC,EAAA,IACjDC,EAAA,GAEIC,IAAgBC;AAAA,IACpB,OAAO;AAAA,MACL,MAAMX,EAAc,QAAQY,EAAgB;AAAA,MAC5C,MAAMT,GAAa,QAAQ;AAAA,MAC3B,eAAeA,GAAa,iBAAiB;AAAA,MAC7C,eAAeA,GAAa,uBAAuB;AAAA,MACnD,aAAaA,GAAa,eAAe;AAAA,IAAA;AAAA,IAE3C,CAACH,GAAeG,CAAW;AAAA,EAAA,GAGvBU,IAAcC,EAAQ;AAAA,IAC1B,UAAUC,EAAY9C,EAAmB;AAAA,IACzC,eAAAyC;AAAA,EAAA,CACD,GAEKM,IAAcC,EAAS,EAAE,SAASJ,EAAY,SAAS,MAAM,QAAQ,GACrEK,IAAqD,OAAMC,MAAQ;AACvE,UAAMlC,EAAkBkC,GAAM,OAAMC,MAAW;AAC7C,UAAIC;AACJ,UAAID,EAAQ,SAASR,EAAgB,eAAe;AAElD,cAAM,EAAE,MAAAU,GAAM,eAAAC,GAAe,eAAAC,GAAe,aAAAC,MAAgBL;AAC5D,aACEE,MAASnB,GAAa,QACtBqB,MAAkBrB,EAAY,iBAC9BsB,MAAgBtB,EAAY,eAC5BoB,MAAkBpB,EAAY,wBAG1B,CADQuB,GAAwB,UAAUN,EAAQ,aAAa,EAC1D,SAAS;AAChB,UAAAP,EAAY,SAAS,iBAAiB,EAAE,MAAM,YAAY;AAC1D;AAAA,QACF;AAGF,cAAMc,IAAsB,MAAMpB,EAAkB;AAAA,UAClD,SAAS;AAAA,YACP,gBAAgB9B;AAAA,YAChB,aAAa;AAAA,cACX,MAAA6C;AAAA,cACA,eAAAE;AAAA,cACA,eAAAD;AAAA,cACA,aAAAE;AAAA,YAAA;AAAA,UACF;AAAA,QACF,CACD;AAED,QAAAzC,EAAQ4C,EAAgB,iCAAiCD,CAAmB,GAI5EjC,EAA0B,EAAI;AAE9B,cAAMmC,KAD+B,MAAMxC,EAAY,WAAWS,CAAqB,GAC7B;AAC1D,QAAAJ,EAA0B,EAAK,GAE/B2B,IAA8BQ,EAAqB;AAAA,MACrD;AAEA,YAAMC,IAAwB,MAAM1B,EAAoB;AAAA,QACtD,SAAS;AAAA,UACP,gBAAgB3B;AAAA,UAChB,aAAa;AAAA,YACX,MAAM2C,EAAQ;AAAA,YACd,SAASC,KAAgCrB,EAAc;AAAA,UAAA;AAAA,QACzD;AAAA,MACF,CACD;AACD,MAAAhB,EAAQ4C,EAAgB,mCAAmCE,CAAqB,GAChF9C,EAAQ4C,EAAgB,8BAA8B;AAAA,IACxD,CAAC;AAAA,EACH,GAEMG,IAAsBf,MAAgBJ,EAAgB;AAE5D,2BACG,WAAA,EAAQ,WAAAlC,GACP,4BAACsD,GAAA,EAAc,GAAGnB,GAChB,UAAA,gBAAAvC,EAAC2D,IAAA,EAAK,UAAUpB,EAAY,aAAaK,CAAQ,GAC/C,UAAA,gBAAAgB,EAACC,MAAK,KAAK,IAAI,eAAe,UAC5B,UAAA;AAAA,IAAA,gBAAA7D,EAACa,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAAL,EAAE,OAAO,GAAE;AAAA,sBACvCsD,IAAA,EAAgB;AAAA,sBAChB,MAAA,EAAG;AAAA,IACHL,KAAuB,gBAAAzD,EAAC+D,IAAA,EAAgB,aAAAlC,EAAA,CAA0B;AAAA,sBAClEmC,IAAA,EACC,UAAA,gBAAAhE;AAAA,MAACa,EAAW;AAAA,MAAX;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,YAAYkB,KAAwBG,KAAsBf;AAAA,QAEzD,YAAE,aAAa;AAAA,MAAA;AAAA,IAAA,EAClB,CACF;AAAA,EAAA,GACF,EAAA,CACF,GACF,GACF;AAEJ;"}
+{"version":3,"file":"PaymentMethod.js","sources":["../../../../src/components/Contractor/PaymentMethod/PaymentMethod.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { SubmitHandler } from 'react-hook-form'\nimport { FormProvider, useForm, useWatch } from 'react-hook-form'\nimport { useContractorPaymentMethodGetSuspense } from '@gusto/embedded-api/react-query/contractorPaymentMethodGet'\nimport { useContractorPaymentMethodGetBankAccountsSuspense } from '@gusto/embedded-api/react-query/contractorPaymentMethodGetBankAccounts'\nimport { useContractorPaymentMethodsCreateBankAccountMutation } from '@gusto/embedded-api/react-query/contractorPaymentMethodsCreateBankAccount'\nimport { useMemo, useState } from 'react'\nimport z from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useContractorPaymentMethodUpdateMutation } from '@gusto/embedded-api/react-query/contractorPaymentMethodUpdate'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { buildContractorPaymentMethodGetQuery } from '@gusto/embedded-api/react-query/contractorPaymentMethodGet'\nimport { useGustoEmbeddedContext } from '@gusto/embedded-api/react-query/_context'\nimport type { PaymentMethodProps } from './types'\nimport { BankAccountForm } from './BankAccountForm'\nimport { PaymentTypeForm } from './PaymentTypeForm'\nimport { useI18n } from '@/i18n'\nimport { BaseComponent, useBase } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Form } from '@/components/Common/Form'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { componentEvents, PAYMENT_METHODS } from '@/shared/constants'\nimport { ActionsLayout } from '@/components/Common/ActionsLayout'\nimport { Flex } from '@/components/Common'\nimport { accountNumberValidation, routingNumberValidation } from '@/helpers/validations'\n\nconst PaymentMethodSchema = z.discriminatedUnion('type', [\n  z.object({\n    type: z.literal('Direct Deposit'),\n    name: z.string().min(1),\n    routingNumber: routingNumberValidation,\n    accountNumber: z.any(), //Explicitely setting account number as most permissive\n    accountType: z.enum(['Checking', 'Savings']),\n  }),\n  z.object({\n    type: z.literal('Check'),\n  }),\n])\n\nexport type PaymentMethodSchemaInputs = z.input<typeof PaymentMethodSchema>\nexport type PaymentMethodSchemaOutputs = z.output<typeof PaymentMethodSchema>\n\nexport function PaymentMethod(props: PaymentMethodProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nfunction Root({ contractorId, className, dictionary }: PaymentMethodProps) {\n  useComponentDictionary('Contractor.PaymentMethod', dictionary)\n  useI18n('Contractor.PaymentMethod')\n  const { t } = useTranslation('Contractor.PaymentMethod')\n  const { onEvent, baseSubmitHandler } = useBase()\n  const Components = useComponentContext()\n  const queryClient = useQueryClient()\n  const gustoClient = useGustoEmbeddedContext()\n  const [isPaymentMethodPending, setIsPaymentMethodPending] = useState(false)\n\n  const contractorPaymentMethod = useContractorPaymentMethodGetSuspense({\n    contractorUuid: contractorId,\n  })\n\n  const getPaymentMethodQuery = buildContractorPaymentMethodGetQuery(gustoClient, {\n    contractorUuid: contractorId,\n  })\n\n  const paymentMethod = contractorPaymentMethod.data.contractorPaymentMethod!\n\n  const {\n    data: { contractorBankAccountList },\n  } = useContractorPaymentMethodGetBankAccountsSuspense({\n    contractorUuid: contractorId,\n  })\n  const bankAccount = contractorBankAccountList?.[0] || undefined\n\n  const { mutateAsync: updatePaymentMethod, isPending: paymentMethodPending } =\n    useContractorPaymentMethodUpdateMutation()\n  const { mutateAsync: createBankAccount, isPending: bankAccountPending } =\n    useContractorPaymentMethodsCreateBankAccountMutation()\n\n  const defaultValues = useMemo(\n    () => ({\n      type: paymentMethod.type || PAYMENT_METHODS.check,\n      name: bankAccount?.name || '',\n      routingNumber: bankAccount?.routingNumber || '',\n      accountNumber: bankAccount?.hiddenAccountNumber || '',\n      accountType: bankAccount?.accountType || 'Checking',\n    }),\n    [paymentMethod, bankAccount],\n  )\n\n  const formMethods = useForm({\n    resolver: zodResolver(PaymentMethodSchema),\n    defaultValues: defaultValues,\n  })\n\n  const watchedType = useWatch({ control: formMethods.control, name: 'type' })\n  const onSubmit: SubmitHandler<PaymentMethodSchemaInputs> = async data => {\n    await baseSubmitHandler(data, async payload => {\n      let updatedPaymentMethodVersion: string | undefined\n      if (payload.type === PAYMENT_METHODS.directDeposit) {\n        /** Custom validation logic for accountNumber - because masked account value is used as default value, it is only validated when any of the bank-related fields are modified*/\n        const { name, accountNumber, routingNumber, accountType } = payload\n        if (\n          name !== bankAccount?.name ||\n          routingNumber !== bankAccount.routingNumber ||\n          accountType !== bankAccount.accountType ||\n          accountNumber !== bankAccount.hiddenAccountNumber\n        ) {\n          const res = accountNumberValidation.safeParse(payload.accountNumber)\n          if (!res.success) {\n            formMethods.setError('accountNumber', { type: 'validate' })\n            return\n          }\n        }\n\n        const bankAccountResponse = await createBankAccount({\n          request: {\n            contractorUuid: contractorId,\n            requestBody: {\n              name,\n              routingNumber,\n              accountNumber,\n              accountType,\n            },\n          },\n        })\n\n        onEvent(componentEvents.CONTRACTOR_BANK_ACCOUNT_CREATED, bankAccountResponse)\n\n        // We have to fetch the updated payment method imperatively here because updating the bank\n        // account will cause the payment method version to update. This ensures we have the latest version.\n        setIsPaymentMethodPending(true)\n        const updatedPaymentMethodResponse = await queryClient.fetchQuery(getPaymentMethodQuery)\n        const updatedPaymentMethod = updatedPaymentMethodResponse.contractorPaymentMethod!\n        setIsPaymentMethodPending(false)\n\n        updatedPaymentMethodVersion = updatedPaymentMethod.version as string\n      }\n      // For check payment method, no bank account creation needed\n      const paymentMethodResponse = await updatePaymentMethod({\n        request: {\n          contractorUuid: contractorId,\n          requestBody: {\n            type: payload.type,\n            version: updatedPaymentMethodVersion || (paymentMethod.version as string),\n          },\n        },\n      })\n      onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_UPDATED, paymentMethodResponse)\n      onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_DONE)\n    })\n  }\n\n  const showBankAccountForm = watchedType === PAYMENT_METHODS.directDeposit\n\n  return (\n    <section className={className}>\n      <FormProvider {...formMethods}>\n        <Form onSubmit={formMethods.handleSubmit(onSubmit)}>\n          <Flex gap={32} flexDirection={'column'}>\n            <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n            <PaymentTypeForm />\n            {showBankAccountForm && <BankAccountForm bankAccount={bankAccount} />}\n            <ActionsLayout>\n              <Components.Button\n                type=\"submit\"\n                variant=\"primary\"\n                isDisabled={paymentMethodPending || bankAccountPending || isPaymentMethodPending}\n              >\n                {t('continueCta')}\n              </Components.Button>\n            </ActionsLayout>\n          </Flex>\n        </Form>\n      </FormProvider>\n    </section>\n  )\n}\n"],"names":["PaymentMethodSchema","z","routingNumberValidation","PaymentMethod","props","jsx","BaseComponent","Root","contractorId","className","dictionary","useComponentDictionary","useI18n","t","useTranslation","onEvent","baseSubmitHandler","useBase","Components","useComponentContext","queryClient","useQueryClient","gustoClient","useGustoEmbeddedContext","isPaymentMethodPending","setIsPaymentMethodPending","useState","contractorPaymentMethod","useContractorPaymentMethodGetSuspense","getPaymentMethodQuery","buildContractorPaymentMethodGetQuery","paymentMethod","contractorBankAccountList","useContractorPaymentMethodGetBankAccountsSuspense","bankAccount","updatePaymentMethod","paymentMethodPending","useContractorPaymentMethodUpdateMutation","createBankAccount","bankAccountPending","useContractorPaymentMethodsCreateBankAccountMutation","defaultValues","useMemo","PAYMENT_METHODS","formMethods","useForm","zodResolver","watchedType","useWatch","onSubmit","data","payload","updatedPaymentMethodVersion","name","accountNumber","routingNumber","accountType","accountNumberValidation","bankAccountResponse","componentEvents","updatedPaymentMethod","paymentMethodResponse","showBankAccountForm","FormProvider","Form","jsxs","Flex","PaymentTypeForm","BankAccountForm","ActionsLayout"],"mappings":"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"}

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

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

package/dist/components/Contractor/Payments/PaymentFlow/PaymentFlow.js

@@ -1,24 +1,24 @@
 import { jsx as t } from "react/jsx-runtime";
-import { createMachine as n } from "robot3";
-import { useMemo as a } from "react";
+import { createMachine as a } from "robot3";
+import { useMemo as n } from "react";
 import { paymentMachine as i, paymentFlowBreadcrumbsNodes as p } from "./paymentStateMachine.js";
 import { PaymentListContextual as c } from "./PaymentFlowComponents.js";
 import { Flow as s } from "../../../Flow/Flow.js";
-import { buildBreadcrumbs as l } from "../../../../helpers/breadcrumbHelpers.js";
-const F = ({ companyId: r, onEvent: o }) => {
-  const m = a(
-    () => n("landing", i, (e) => ({
+import { buildBreadcrumbs as u } from "../../../../helpers/breadcrumbHelpers.js";
+const F = ({ companyId: r, onEvent: m }) => {
+  const o = n(
+    () => a("landing", i, (e) => ({
       ...e,
       component: c,
       companyId: r,
-      progressBarType: null,
-      //landing step does not show progress bar/breadcrumbs
-      breadcrumbs: l(p),
-      currentBreadcrumb: "landing"
+      header: {
+        type: "breadcrumbs",
+        breadcrumbs: u(p)
+      }
     })),
     [r]
   );
-  return /* @__PURE__ */ t(s, { machine: m, onEvent: o });
+  return /* @__PURE__ */ t(s, { machine: o, onEvent: m });
 };
 export {
   F as PaymentFlow

package/dist/components/Contractor/Payments/PaymentFlow/PaymentFlow.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentFlow.js","sources":["../../../../../src/components/Contractor/Payments/PaymentFlow/PaymentFlow.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport { paymentFlowBreadcrumbsNodes, paymentMachine } from './paymentStateMachine'\nimport {\n  PaymentListContextual,\n  type PaymentFlowContextInterface,\n  type PaymentFlowProps,\n} from './PaymentFlowComponents'\nimport { Flow } from '@/components/Flow/Flow'\nimport { buildBreadcrumbs } from '@/helpers/breadcrumbHelpers'\n\nexport const PaymentFlow = ({ companyId, onEvent }: PaymentFlowProps) => {\n  const paymentFlow = useMemo(\n    () =>\n      createMachine('landing', paymentMachine, (initialContext: PaymentFlowContextInterface) => ({\n        ...initialContext,\n        component: PaymentListContextual,\n        companyId,\n        progressBarType: null, //landing step does not show progress bar/breadcrumbs\n        breadcrumbs: buildBreadcrumbs(paymentFlowBreadcrumbsNodes),\n        currentBreadcrumb: 'landing',\n      })),\n    [companyId],\n  )\n  return <Flow machine={paymentFlow} onEvent={onEvent} />\n}\n"],"names":["PaymentFlow","companyId","onEvent","paymentFlow","useMemo","createMachine","paymentMachine","initialContext","PaymentListContextual","buildBreadcrumbs","paymentFlowBreadcrumbsNodes","jsx","Flow"],"mappings":";;;;;;;AAWO,MAAMA,IAAc,CAAC,EAAE,WAAAC,GAAW,SAAAC,QAAgC;AACvE,QAAMC,IAAcC;AAAA,IAClB,MACEC,EAAc,WAAWC,GAAgB,CAACC,OAAiD;AAAA,MACzF,GAAGA;AAAA,MACH,WAAWC;AAAA,MACX,WAAAP;AAAA,MACA,iBAAiB;AAAA;AAAA,MACjB,aAAaQ,EAAiBC,CAA2B;AAAA,MACzD,mBAAmB;AAAA,IAAA,EACnB;AAAA,IACJ,CAACT,CAAS;AAAA,EAAA;AAEZ,SAAO,gBAAAU,EAACC,GAAA,EAAK,SAAST,GAAa,SAAAD,EAAA,CAAkB;AACvD;"}
+{"version":3,"file":"PaymentFlow.js","sources":["../../../../../src/components/Contractor/Payments/PaymentFlow/PaymentFlow.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport { paymentFlowBreadcrumbsNodes, paymentMachine } from './paymentStateMachine'\nimport {\n  PaymentListContextual,\n  type PaymentFlowContextInterface,\n  type PaymentFlowProps,\n} from './PaymentFlowComponents'\nimport { Flow } from '@/components/Flow/Flow'\nimport { buildBreadcrumbs } from '@/helpers/breadcrumbHelpers'\n\nexport const PaymentFlow = ({ companyId, onEvent }: PaymentFlowProps) => {\n  const paymentFlow = useMemo(\n    () =>\n      createMachine('landing', paymentMachine, (initialContext: PaymentFlowContextInterface) => ({\n        ...initialContext,\n        component: PaymentListContextual,\n        companyId,\n        header: {\n          type: 'breadcrumbs' as const,\n          breadcrumbs: buildBreadcrumbs(paymentFlowBreadcrumbsNodes),\n        },\n      })),\n    [companyId],\n  )\n  return <Flow machine={paymentFlow} onEvent={onEvent} />\n}\n"],"names":["PaymentFlow","companyId","onEvent","paymentFlow","useMemo","createMachine","paymentMachine","initialContext","PaymentListContextual","buildBreadcrumbs","paymentFlowBreadcrumbsNodes","jsx","Flow"],"mappings":";;;;;;;AAWO,MAAMA,IAAc,CAAC,EAAE,WAAAC,GAAW,SAAAC,QAAgC;AACvE,QAAMC,IAAcC;AAAA,IAClB,MACEC,EAAc,WAAWC,GAAgB,CAACC,OAAiD;AAAA,MACzF,GAAGA;AAAA,MACH,WAAWC;AAAA,MACX,WAAAP;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,aAAaQ,EAAiBC,CAA2B;AAAA,MAAA;AAAA,IAC3D,EACA;AAAA,IACJ,CAACT,CAAS;AAAA,EAAA;AAEZ,SAAO,gBAAAU,EAACC,GAAA,EAAK,SAAST,GAAa,SAAAD,EAAA,CAAkB;AACvD;"}

package/dist/components/Contractor/Payments/PaymentFlow/paymentStateMachine.js

@@ -1,21 +1,19 @@
 import { state as m, transition as a, reduce as n } from "robot3";
-import { getContractorDisplayName as p } from "../CreatePayment/helpers.js";
-import { PaymentListContextual as i, PaymentStatementContextual as u, PaymentSummaryContextual as d, CreatePaymentContextual as T, PaymentHistoryContextual as c, InformationRequestsContextual as g } from "./PaymentFlowComponents.js";
-import { informationRequestEvents as l, componentEvents as o, payrollWireEvents as y } from "../../../../shared/constants.js";
-import { updateBreadcrumbs as r } from "../../../../helpers/breadcrumbHelpers.js";
-import { createBreadcrumbNavigateTransition as b } from "../../../Common/FlowBreadcrumbs/breadcrumbTransitionHelpers.js";
-const _ = {
+import { getContractorDisplayName as l } from "../CreatePayment/helpers.js";
+import { PaymentListContextual as d, PaymentStatementContextual as p, PaymentSummaryContextual as C, CreatePaymentContextual as P, PaymentHistoryContextual as y, InformationRequestsContextual as b } from "./PaymentFlowComponents.js";
+import { informationRequestEvents as u, componentEvents as r, payrollWireEvents as s } from "../../../../shared/constants.js";
+import { patchBreadcrumbsHeader as i, updateBreadcrumbs as o } from "../../../../helpers/breadcrumbHelpers.js";
+import { createBreadcrumbNavigateTransition as R } from "../../../Common/FlowBreadcrumbs/breadcrumbTransitionHelpers.js";
+const I = {
   landing: {
     parent: null,
     item: {
       id: "landing",
       label: "breadcrumbLabel",
       namespace: "Contractor.Payments.PaymentsList",
-      onNavigate: ((e) => ({
-        ...e,
-        currentBreadcrumb: "landing",
-        progressBarType: null,
-        component: i
+      onNavigate: ((t) => ({
+        ...i(t, { currentBreadcrumbId: void 0 }),
+        component: d
       }))
     }
   },
@@ -25,8 +23,8 @@ const _ = {
       id: "createPayment",
       label: "breadcrumbLabel",
       namespace: "Contractor.Payments.CreatePayment",
-      onNavigate: ((e) => ({
-        ...r("createPayment", e)
+      onNavigate: ((t) => ({
+        ...o("createPayment", t)
       }))
     }
   },
@@ -36,8 +34,8 @@ const _ = {
       id: "paymentSummary",
       label: "breadcrumbLabel",
       namespace: "Contractor.Payments.PaymentSummary",
-      onNavigate: ((e) => ({
-        ...r("paymentSummary", e)
+      onNavigate: ((t) => ({
+        ...o("paymentSummary", t)
       }))
     }
   },
@@ -47,9 +45,9 @@ const _ = {
       id: "history",
       label: "breadcrumbLabel",
       namespace: "Contractor.Payments.PaymentHistory",
-      onNavigate: ((e) => ({
-        ...r("history", e),
-        component: c
+      onNavigate: ((t) => ({
+        ...o("history", t),
+        component: y
       }))
     }
   },
@@ -61,55 +59,48 @@ const _ = {
       namespace: "Contractor.Payments.PaymentStatement"
     }
   }
-}, s = b(), A = {
+}, c = R(), g = {
   landing: m(
     a(
-      o.CONTRACTOR_PAYMENT_CREATE,
+      r.CONTRACTOR_PAYMENT_CREATE,
       "createPayment",
-      n(
-        (e, t) => ({
-          ...r("createPayment", e),
-          component: T,
-          progressBarType: "breadcrumbs",
-          alerts: void 0
-        })
-      )
+      n((t) => ({
+        ...o("createPayment", t),
+        component: P,
+        alerts: void 0
+      }))
     ),
     a(
-      o.CONTRACTOR_PAYMENT_VIEW,
+      r.CONTRACTOR_PAYMENT_VIEW,
       "history",
       n(
-        (e, t) => ({
-          ...r("history", e),
-          component: c,
-          currentPaymentId: t.payload.paymentId,
-          progressBarType: "breadcrumbs",
+        (t, e) => ({
+          ...o("history", t),
+          component: y,
+          currentPaymentId: e.payload.paymentId,
           alerts: void 0
         })
       )
     ),
     a(
-      o.CONTRACTOR_PAYMENT_RFI_RESPOND,
+      r.CONTRACTOR_PAYMENT_RFI_RESPOND,
       "informationRequests",
-      n(
-        (e, t) => ({
-          ...e,
-          component: g,
-          progressBarType: null
-        })
-      )
+      n((t) => ({
+        ...i(t, { currentBreadcrumbId: void 0 }),
+        component: b
+      }))
     ),
     a(
-      y.PAYROLL_WIRE_FORM_DONE,
+      s.PAYROLL_WIRE_FORM_DONE,
       "landing",
       n(
-        (e, t) => ({
-          ...e,
+        (t, e) => ({
+          ...t,
           alerts: [
             {
               type: "success",
               title: "wireDetailsSubmitted",
-              content: t.payload.confirmationAlert.content
+              content: e.payload.confirmationAlert.content
             }
           ]
         })
@@ -118,119 +109,105 @@ const _ = {
   ),
   createPayment: m(
     a(
-      o.CONTRACTOR_PAYMENT_CREATED,
+      r.CONTRACTOR_PAYMENT_CREATED,
       "paymentSummary",
       n(
-        (e, t) => ({
-          ...r("paymentSummary", e),
-          component: d,
-          createdPaymentGroupId: t.payload.uuid,
-          progressBarType: "breadcrumbs",
+        (t, e) => ({
+          ...o("paymentSummary", t),
+          component: C,
+          createdPaymentGroupId: e.payload.uuid,
           alerts: void 0
         })
       )
     ),
-    s("landing")
+    c("landing")
   ),
   paymentSummary: m(
     a(
-      o.CONTRACTOR_PAYMENT_EXIT,
+      r.CONTRACTOR_PAYMENT_EXIT,
       "landing",
-      n(
-        (e, t) => ({
-          ...r("landing", e),
-          progressBarType: null,
-          component: i,
-          createdPaymentGroupId: void 0,
-          alerts: void 0
-        })
-      )
+      n((t) => ({
+        ...i(t, { currentBreadcrumbId: void 0 }),
+        component: d,
+        createdPaymentGroupId: void 0,
+        alerts: void 0
+      }))
     ),
     a(
-      y.PAYROLL_WIRE_FORM_DONE,
+      s.PAYROLL_WIRE_FORM_DONE,
       "paymentSummary",
       n(
-        (e, t) => ({
-          ...e,
+        (t, e) => ({
+          ...t,
           alerts: [
             {
               type: "success",
               title: "wireDetailsSubmitted",
-              content: t.payload.confirmationAlert.content
+              content: e.payload.confirmationAlert.content
             }
           ]
         })
       )
     ),
-    s("landing")
+    c("landing")
   ),
   history: m(
     a(
-      o.CONTRACTOR_PAYMENT_VIEW_DETAILS,
+      r.CONTRACTOR_PAYMENT_VIEW_DETAILS,
       "statement",
       n(
-        (e, t) => ({
-          ...r("statement", e, {
-            contractorName: p(t.payload.contractor)
+        (t, e) => ({
+          ...o("statement", t, {
+            contractorName: l(e.payload.contractor)
           }),
-          component: u,
-          currentContractorUuid: t.payload.contractor.uuid,
-          currentPaymentId: t.payload.paymentGroupId,
-          progressBarType: "breadcrumbs",
+          component: p,
+          currentContractorUuid: e.payload.contractor.uuid,
+          currentPaymentId: e.payload.paymentGroupId,
           alerts: void 0
         })
       )
     ),
     a(
-      o.CONTRACTOR_PAYMENT_CANCEL,
+      r.CONTRACTOR_PAYMENT_CANCEL,
       "landing",
-      n(
-        (e, t) => ({
-          ...r("landing", e),
-          progressBarType: null,
-          component: i,
-          alerts: [
-            {
-              type: "success",
-              title: "paymentCancelledSuccessfully"
-            }
-          ]
-        })
-      )
+      n((t) => ({
+        ...i(t, { currentBreadcrumbId: void 0 }),
+        component: d,
+        alerts: [
+          {
+            type: "success",
+            title: "paymentCancelledSuccessfully"
+          }
+        ]
+      }))
     ),
-    s("landing")
+    c("landing")
   ),
   statement: m(
-    s("landing"),
-    s("history")
+    c("landing"),
+    c("history")
   ),
   informationRequests: m(
     a(
-      l.INFORMATION_REQUEST_FORM_DONE,
+      u.INFORMATION_REQUEST_FORM_DONE,
       "landing",
-      n(
-        (e, t) => ({
-          ...r("landing", e),
-          component: i,
-          progressBarType: null
-        })
-      )
+      n((t) => ({
+        ...i(t, { currentBreadcrumbId: void 0 }),
+        component: d
+      }))
     ),
     a(
-      l.INFORMATION_REQUEST_FORM_CANCEL,
+      u.INFORMATION_REQUEST_FORM_CANCEL,
       "landing",
-      n(
-        (e, t) => ({
-          ...r("landing", e),
-          component: i,
-          progressBarType: null
-        })
-      )
+      n((t) => ({
+        ...i(t, { currentBreadcrumbId: void 0 }),
+        component: d
+      }))
     )
   )
 };
 export {
-  _ as paymentFlowBreadcrumbsNodes,
-  A as paymentMachine
+  I as paymentFlowBreadcrumbsNodes,
+  g as paymentMachine
 };
 //# sourceMappingURL=paymentStateMachine.js.map