@gusto/embedded-react-sdk 0.19.0 → 0.21.0

package/dist/components/Employee/Taxes/FederalForm.js

@@ -1,11 +1,14 @@
 import { jsxs as l, Fragment as a, jsx as r } from "react/jsx-runtime";
-import { useTranslation as s, Trans as u } from "react-i18next";
+import { useTranslation as s, Trans as m } from "react-i18next";
 import { z as t } from "zod";
-import { useComponentContext as m } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { SelectField as d } from "../../Common/Fields/SelectField/SelectField.js";
-import { RadioGroupField as f } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import "../../../shared/constants.js";
+import "classnames";
+import { RadioGroupField as u } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
 import { NumberInputField as i } from "../../Common/Fields/NumberInputField/NumberInputField.js";
-const F = t.object({
+import { useComponentContext as d } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "react";
+import { SelectField as f } from "../../Common/Fields/SelectField/SelectField.js";
+const I = t.object({
   filingStatus: t.string().min(1),
   twoJobs: t.string().min(1),
   dependentsAmount: t.number().transform(String),
@@ -14,8 +17,8 @@ const F = t.object({
   extraWithholding: t.number().transform(String),
   w4DataType: t.enum(["pre_2020_w4", "rev_2020_w4"])
 });
-function R() {
-  const { t: e } = s("Employee.Taxes"), o = m(), n = [
+function v() {
+  const { t: e } = s("Employee.Taxes"), o = d(), n = [
     { value: "Single", label: e("filingStatusSingle") },
     { value: "Married", label: e("filingStatusMarried") },
     { value: "Head of Household", label: e("filingStatusHeadOfHousehold") },
@@ -23,7 +26,7 @@ function R() {
   ];
   return /* @__PURE__ */ l(a, { children: [
     /* @__PURE__ */ r(
-      d,
+      f,
       {
         name: "filingStatus",
         label: e("federalFilingStatus1c"),
@@ -34,14 +37,14 @@ function R() {
       }
     ),
     /* @__PURE__ */ r(
-      f,
+      u,
       {
         name: "twoJobs",
         isRequired: !0,
         label: e("multipleJobs2c"),
         errorMessage: e("validations.federalTwoJobs"),
         description: /* @__PURE__ */ r(o.Text, { children: /* @__PURE__ */ r(
-          u,
+          m,
           {
             i18nKey: "includesSpouseExplanation",
             t: e,
@@ -101,7 +104,7 @@ function R() {
   ] });
 }
 export {
-  R as FederalForm,
-  F as FederalFormSchema
+  v as FederalForm,
+  I as FederalFormSchema
 };
 //# sourceMappingURL=FederalForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FederalForm.js","sources":["../../../../src/components/Employee/Taxes/FederalForm.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { NumberInputField, RadioGroupField, SelectField } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport const FederalFormSchema = z.object({\n  filingStatus: z.string().min(1),\n  twoJobs: z.string().min(1),\n  dependentsAmount: z.number().transform(String),\n  otherIncome: z.number().transform(String),\n  deductions: z.number().transform(String),\n  extraWithholding: z.number().transform(String),\n  w4DataType: z.enum(['pre_2020_w4', 'rev_2020_w4']),\n})\n\nexport type FederalFormInputs = z.input<typeof FederalFormSchema>\nexport type FederalFormPayload = z.output<typeof FederalFormSchema>\n\nexport function FederalForm() {\n  const { t } = useTranslation('Employee.Taxes')\n  const Components = useComponentContext()\n\n  const filingStatusCategories = [\n    { value: 'Single', label: t('filingStatusSingle') },\n    { value: 'Married', label: t('filingStatusMarried') },\n    { value: 'Head of Household', label: t('filingStatusHeadOfHousehold') },\n    { value: 'Exempt from withholding', label: t('filingStatusExemptFromWithholding') },\n  ]\n\n  return (\n    <>\n      <SelectField\n        name=\"filingStatus\"\n        label={t('federalFilingStatus1c')}\n        placeholder={t('federalFillingStatusPlaceholder')}\n        options={filingStatusCategories}\n        isRequired\n        errorMessage={t('validations.federalFilingStatus')}\n      />\n      <RadioGroupField\n        name=\"twoJobs\"\n        isRequired\n        label={t('multipleJobs2c')}\n        errorMessage={t('validations.federalTwoJobs')}\n        description={\n          <Components.Text>\n            <Trans\n              i18nKey={'includesSpouseExplanation'}\n              t={t}\n              components={{\n                IrsLink: <Components.Link />,\n              }}\n            />\n          </Components.Text>\n        }\n        options={[\n          { value: 'true', label: t('twoJobYesLabel') },\n          { value: 'false', label: t('twoJobNoLabel') },\n        ]}\n      />\n      <NumberInputField\n        name=\"dependentsAmount\"\n        isRequired\n        label={t('dependentsTotalIfApplicable')}\n        errorMessage={t('fieldIsRequired')}\n      />\n      <NumberInputField\n        name=\"otherIncome\"\n        isRequired\n        label={t('otherIncome')}\n        format=\"currency\"\n        min={0}\n        errorMessage={t('fieldIsRequired')}\n      />\n      <NumberInputField\n        name=\"deductions\"\n        isRequired\n        label={t('deductions')}\n        format=\"currency\"\n        min={0}\n        errorMessage={t('fieldIsRequired')}\n      />\n      <NumberInputField\n        name=\"extraWithholding\"\n        isRequired\n        label={t('extraWithholding')}\n        format=\"currency\"\n        min={0}\n        errorMessage={t('fieldIsRequired')}\n      />\n    </>\n  )\n}\n"],"names":["FederalFormSchema","z","FederalForm","t","useTranslation","Components","useComponentContext","filingStatusCategories","jsxs","Fragment","jsx","SelectField","RadioGroupField","Trans","NumberInputField"],"mappings":"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"}
+{"version":3,"file":"FederalForm.js","sources":["../../../../src/components/Employee/Taxes/FederalForm.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { NumberInputField, RadioGroupField, SelectField } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport const FederalFormSchema = z.object({\n  filingStatus: z.string().min(1),\n  twoJobs: z.string().min(1),\n  dependentsAmount: z.number().transform(String),\n  otherIncome: z.number().transform(String),\n  deductions: z.number().transform(String),\n  extraWithholding: z.number().transform(String),\n  w4DataType: z.enum(['pre_2020_w4', 'rev_2020_w4']),\n})\n\nexport type FederalFormInputs = z.input<typeof FederalFormSchema>\nexport type FederalFormPayload = z.output<typeof FederalFormSchema>\n\nexport function FederalForm() {\n  const { t } = useTranslation('Employee.Taxes')\n  const Components = useComponentContext()\n\n  const filingStatusCategories = [\n    { value: 'Single', label: t('filingStatusSingle') },\n    { value: 'Married', label: t('filingStatusMarried') },\n    { value: 'Head of Household', label: t('filingStatusHeadOfHousehold') },\n    { value: 'Exempt from withholding', label: t('filingStatusExemptFromWithholding') },\n  ]\n\n  return (\n    <>\n      <SelectField\n        name=\"filingStatus\"\n        label={t('federalFilingStatus1c')}\n        placeholder={t('federalFillingStatusPlaceholder')}\n        options={filingStatusCategories}\n        isRequired\n        errorMessage={t('validations.federalFilingStatus')}\n      />\n      <RadioGroupField\n        name=\"twoJobs\"\n        isRequired\n        label={t('multipleJobs2c')}\n        errorMessage={t('validations.federalTwoJobs')}\n        description={\n          <Components.Text>\n            <Trans\n              i18nKey={'includesSpouseExplanation'}\n              t={t}\n              components={{\n                IrsLink: <Components.Link />,\n              }}\n            />\n          </Components.Text>\n        }\n        options={[\n          { value: 'true', label: t('twoJobYesLabel') },\n          { value: 'false', label: t('twoJobNoLabel') },\n        ]}\n      />\n      <NumberInputField\n        name=\"dependentsAmount\"\n        isRequired\n        label={t('dependentsTotalIfApplicable')}\n        errorMessage={t('fieldIsRequired')}\n      />\n      <NumberInputField\n        name=\"otherIncome\"\n        isRequired\n        label={t('otherIncome')}\n        format=\"currency\"\n        min={0}\n        errorMessage={t('fieldIsRequired')}\n      />\n      <NumberInputField\n        name=\"deductions\"\n        isRequired\n        label={t('deductions')}\n        format=\"currency\"\n        min={0}\n        errorMessage={t('fieldIsRequired')}\n      />\n      <NumberInputField\n        name=\"extraWithholding\"\n        isRequired\n        label={t('extraWithholding')}\n        format=\"currency\"\n        min={0}\n        errorMessage={t('fieldIsRequired')}\n      />\n    </>\n  )\n}\n"],"names":["FederalFormSchema","z","FederalForm","t","useTranslation","Components","useComponentContext","filingStatusCategories","jsxs","Fragment","jsx","SelectField","RadioGroupField","Trans","NumberInputField"],"mappings":"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"}

package/dist/components/Employee/Taxes/useTaxes.js

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

package/dist/components/Employee/Taxes/useTaxes.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTaxes.js","sources":["../../../../src/components/Employee/Taxes/useTaxes.ts"],"sourcesContent":["import type { EmployeeStateTaxesList } from '@gusto/embedded-api/models/components/employeestatetaxeslist'\nimport { createCompoundContext } from '@/components/Base'\n\ntype TaxesContextType = {\n  employeeStateTaxes: EmployeeStateTaxesList[]\n  isPending: boolean\n  isAdmin: boolean\n}\n\nconst [useTaxes, TaxesProvider] = createCompoundContext<TaxesContextType>('TaxesContext')\nexport { useTaxes, TaxesProvider }\n"],"names":["useTaxes","TaxesProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;AASA,MAAM,CAACA,GAAUC,CAAa,IAAIC,EAAwC,cAAc;"}
+{"version":3,"file":"useTaxes.js","sources":["../../../../src/components/Employee/Taxes/useTaxes.ts"],"sourcesContent":["import type { EmployeeStateTaxesList } from '@gusto/embedded-api/models/components/employeestatetaxeslist'\nimport { createCompoundContext } from '@/components/Base'\n\ntype TaxesContextType = {\n  employeeStateTaxes: EmployeeStateTaxesList[]\n  isPending: boolean\n  isAdmin: boolean\n}\n\nconst [useTaxes, TaxesProvider] = createCompoundContext<TaxesContextType>('TaxesContext')\nexport { useTaxes, TaxesProvider }\n"],"names":["useTaxes","TaxesProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,CAACA,GAAUC,CAAa,IAAIC,EAAwC,cAAc;"}

package/dist/components/Flow/Flow.js

@@ -1,58 +1,61 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
 import { useMachine as B } from "react-robot";
 import { useTranslation as C } from "react-i18next";
 import { FlowBreadcrumbs as v } from "../Common/FlowBreadcrumbs/FlowBreadcrumbs.js";
 import { Flex as l, FlexItem as u } from "../Common/Flex/Flex.js";
-import { FlowContext as w } from "./useFlow.js";
-import { useComponentContext as F } from "../../contexts/ComponentAdapter/useComponentContext.js";
-const T = ({ onEvent: d, machine: x }) => {
-  const f = F(), { t: b } = C(), [r, g, a] = B(x, {
-    onEvent: m,
+import "classnames";
+import "../../shared/constants.js";
+import { useComponentContext as w } from "../../contexts/ComponentAdapter/useComponentContext.js";
+import "react";
+import { FlowContext as F } from "./useFlow.js";
+const M = ({ onEvent: d, machine: x }) => {
+  const f = w(), { t: b } = C(), [e, g, i] = B(x, {
+    onEvent: a,
     component: null,
     progressBarCta: null
   }), {
-    progressBarType: i = null,
+    progressBarType: m = null,
     totalSteps: o = null,
-    currentStep: n = null,
-    currentBreadcrumbId: t,
+    currentStep: t = null,
+    currentBreadcrumbId: n,
     breadcrumbs: h = {}
-  } = r.context;
-  function m(s, c) {
-    a.child ? a.child.send({ type: s, payload: c }) : g({ type: s, payload: c }), d(s, c);
+  } = e.context;
+  function a(s, c) {
+    i.child ? i.child.send({ type: s, payload: c }) : g({ type: s, payload: c }), d(s, c);
   }
-  return /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(
-    w.Provider,
+  return /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
+    F.Provider,
     {
       value: {
-        ...r.context
+        ...e.context
       },
       children: /* @__PURE__ */ p(l, { flexDirection: "column", gap: 32, children: [
-        i === "progress" && n && o && /* @__PURE__ */ e(
+        m === "progress" && t && o && /* @__PURE__ */ r(
           f.ProgressBar,
           {
             totalSteps: o,
-            currentStep: n,
-            label: b("progressBarLabel", { totalSteps: o, currentStep: n }),
-            cta: r.context.progressBarCta
+            currentStep: t,
+            label: b("progressBarLabel", { totalSteps: o, currentStep: t }),
+            cta: e.context.progressBarCta
           }
         ),
-        i === "breadcrumbs" && /* @__PURE__ */ p(l, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [
-          /* @__PURE__ */ e(u, { flexGrow: 1, children: /* @__PURE__ */ e(
+        m === "breadcrumbs" && /* @__PURE__ */ p(l, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ r(u, { flexGrow: 1, children: /* @__PURE__ */ r(
             v,
             {
-              breadcrumbs: t ? h[t] ?? [] : [],
-              currentBreadcrumbId: t,
-              onEvent: m
+              breadcrumbs: n ? h[n] ?? [] : [],
+              currentBreadcrumbId: n,
+              onEvent: a
             }
           ) }),
-          /* @__PURE__ */ e(u, { children: r.context.progressBarCta && /* @__PURE__ */ e(r.context.progressBarCta, {}) })
+          /* @__PURE__ */ r(u, { children: e.context.progressBarCta && /* @__PURE__ */ r(e.context.progressBarCta, {}) })
         ] }),
-        r.context.component && /* @__PURE__ */ e(r.context.component, {})
+        e.context.component && /* @__PURE__ */ r(e.context.component, {})
       ] })
     }
   ) });
 };
 export {
-  T as Flow
+  M as Flow
 };
 //# sourceMappingURL=Flow.js.map

package/dist/components/Flow/Flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flow.js","sources":["../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useMachine } from 'react-robot'\nimport { type Machine } from 'robot3'\nimport { useTranslation } from 'react-i18next'\nimport type { OnEventType } from '../Base/useBase'\nimport { FlowBreadcrumbs } from '../Common/FlowBreadcrumbs/FlowBreadcrumbs'\nimport { Flex } from '../Common/Flex'\nimport { FlexItem } from '../Common'\nimport type { FlowContextInterface } from './useFlow'\nimport { FlowContext } from './useFlow'\nimport { type EventType } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ntype FlowProps = {\n  machine: Machine<object, FlowContextInterface>\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport const Flow = ({ onEvent, machine }: FlowProps) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const [current, send, service] = useMachine(machine, {\n    onEvent: handleEvent,\n    component: null,\n    progressBarCta: null,\n  })\n\n  const {\n    progressBarType = null,\n    totalSteps = null,\n    currentStep = null,\n    currentBreadcrumbId,\n    breadcrumbs = {},\n  } = current.context\n\n  function handleEvent(type: EventType, data: unknown): void {\n    //When dealing with nested state machine, correct machine needs to recieve an event\n    if (service.child) {\n      //@ts-expect-error: not sure why 'type' type is incorrectly derived here\n      service.child.send({ type: type, payload: data })\n    } else {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      send({ type: type, payload: data })\n    }\n    // Pass event upstream - onEvent can be optional on Flow component\n    onEvent(type, data)\n  }\n\n  return (\n    <Flex>\n      <FlowContext.Provider\n        value={{\n          ...current.context,\n        }}\n      >\n        <Flex flexDirection=\"column\" gap={32}>\n          {progressBarType === 'progress' && currentStep && totalSteps && (\n            <Components.ProgressBar\n              totalSteps={totalSteps}\n              currentStep={currentStep}\n              label={t('progressBarLabel', { totalSteps, currentStep })}\n              cta={current.context.progressBarCta}\n            />\n          )}\n          {progressBarType === 'breadcrumbs' && (\n            <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n              <FlexItem flexGrow={1}>\n                <FlowBreadcrumbs\n                  breadcrumbs={currentBreadcrumbId ? (breadcrumbs[currentBreadcrumbId] ?? []) : []}\n                  currentBreadcrumbId={currentBreadcrumbId}\n                  onEvent={handleEvent}\n                />\n              </FlexItem>\n              <FlexItem>\n                {current.context.progressBarCta && <current.context.progressBarCta />}\n              </FlexItem>\n            </Flex>\n          )}\n          {current.context.component && <current.context.component />}\n        </Flex>\n      </FlowContext.Provider>\n    </Flex>\n  )\n}\n"],"names":["Flow","onEvent","machine","Components","useComponentContext","t","useTranslation","current","send","service","useMachine","handleEvent","progressBarType","totalSteps","currentStep","currentBreadcrumbId","breadcrumbs","type","data","Flex","jsx","FlowContext","jsxs","FlexItem","FlowBreadcrumbs"],"mappings":";;;;;;;AAiBO,MAAMA,IAAO,CAAC,EAAE,SAAAC,GAAS,SAAAC,QAAyB;AACvD,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,CAACC,GAASC,GAAMC,CAAO,IAAIC,EAAWR,GAAS;AAAA,IACnD,SAASS;AAAA,IACT,WAAW;AAAA,IACX,gBAAgB;AAAA,EAAA,CACjB,GAEK;AAAA,IACJ,iBAAAC,IAAkB;AAAA,IAClB,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,qBAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,EAAC,IACbT,EAAQ;AAEZ,WAASI,EAAYM,GAAiBC,GAAqB;AAEzD,IAAIT,EAAQ,QAEVA,EAAQ,MAAM,KAAK,EAAE,MAAAQ,GAAY,SAASC,GAAM,IAGhDV,EAAK,EAAE,MAAAS,GAAY,SAASC,EAAA,CAAM,GAGpCjB,EAAQgB,GAAMC,CAAI;AAAA,EACpB;AAEA,2BACGC,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,GAAGd,EAAQ;AAAA,MAAA;AAAA,MAGb,UAAA,gBAAAe,EAACH,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,QAAAP,MAAoB,cAAcE,KAAeD,KAChD,gBAAAO;AAAA,UAACjB,EAAW;AAAA,UAAX;AAAA,YACC,YAAAU;AAAA,YACA,aAAAC;AAAA,YACA,OAAOT,EAAE,oBAAoB,EAAE,YAAAQ,GAAY,aAAAC,GAAa;AAAA,YACxD,KAAKP,EAAQ,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxBK,MAAoB,iBACnB,gBAAAU,EAACH,GAAA,EAAK,eAAc,OAAM,gBAAe,iBAAgB,YAAW,UAClE,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,aAAaT,IAAuBC,EAAYD,CAAmB,KAAK,CAAA,IAAM,CAAA;AAAA,cAC9E,qBAAAA;AAAA,cACA,SAASJ;AAAA,YAAA;AAAA,UAAA,GAEb;AAAA,UACA,gBAAAS,EAACG,GAAA,EACE,UAAAhB,EAAQ,QAAQ,oCAAmBA,EAAQ,QAAQ,gBAAhB,CAAA,CAA+B,EAAA,CACrE;AAAA,QAAA,GACF;AAAA,QAEDA,EAAQ,QAAQ,+BAAcA,EAAQ,QAAQ,WAAhB,CAAA,CAA0B;AAAA,MAAA,EAAA,CAC3D;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"Flow.js","sources":["../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useMachine } from 'react-robot'\nimport { type Machine } from 'robot3'\nimport { useTranslation } from 'react-i18next'\nimport type { OnEventType } from '../Base/useBase'\nimport { FlowBreadcrumbs } from '../Common/FlowBreadcrumbs/FlowBreadcrumbs'\nimport { Flex } from '../Common/Flex'\nimport { FlexItem } from '../Common'\nimport type { FlowContextInterface } from './useFlow'\nimport { FlowContext } from './useFlow'\nimport { type EventType } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ntype FlowProps = {\n  machine: Machine<object, FlowContextInterface>\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport const Flow = ({ onEvent, machine }: FlowProps) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const [current, send, service] = useMachine(machine, {\n    onEvent: handleEvent,\n    component: null,\n    progressBarCta: null,\n  })\n\n  const {\n    progressBarType = null,\n    totalSteps = null,\n    currentStep = null,\n    currentBreadcrumbId,\n    breadcrumbs = {},\n  } = current.context\n\n  function handleEvent(type: EventType, data: unknown): void {\n    //When dealing with nested state machine, correct machine needs to recieve an event\n    if (service.child) {\n      //@ts-expect-error: not sure why 'type' type is incorrectly derived here\n      service.child.send({ type: type, payload: data })\n    } else {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      send({ type: type, payload: data })\n    }\n    // Pass event upstream - onEvent can be optional on Flow component\n    onEvent(type, data)\n  }\n\n  return (\n    <Flex>\n      <FlowContext.Provider\n        value={{\n          ...current.context,\n        }}\n      >\n        <Flex flexDirection=\"column\" gap={32}>\n          {progressBarType === 'progress' && currentStep && totalSteps && (\n            <Components.ProgressBar\n              totalSteps={totalSteps}\n              currentStep={currentStep}\n              label={t('progressBarLabel', { totalSteps, currentStep })}\n              cta={current.context.progressBarCta}\n            />\n          )}\n          {progressBarType === 'breadcrumbs' && (\n            <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n              <FlexItem flexGrow={1}>\n                <FlowBreadcrumbs\n                  breadcrumbs={currentBreadcrumbId ? (breadcrumbs[currentBreadcrumbId] ?? []) : []}\n                  currentBreadcrumbId={currentBreadcrumbId}\n                  onEvent={handleEvent}\n                />\n              </FlexItem>\n              <FlexItem>\n                {current.context.progressBarCta && <current.context.progressBarCta />}\n              </FlexItem>\n            </Flex>\n          )}\n          {current.context.component && <current.context.component />}\n        </Flex>\n      </FlowContext.Provider>\n    </Flex>\n  )\n}\n"],"names":["Flow","onEvent","machine","Components","useComponentContext","t","useTranslation","current","send","service","useMachine","handleEvent","progressBarType","totalSteps","currentStep","currentBreadcrumbId","breadcrumbs","type","data","Flex","jsx","FlowContext","jsxs","FlexItem","FlowBreadcrumbs"],"mappings":";;;;;;;;;;AAiBO,MAAMA,IAAO,CAAC,EAAE,SAAAC,GAAS,SAAAC,QAAyB;AACvD,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,CAACC,GAASC,GAAMC,CAAO,IAAIC,EAAWR,GAAS;AAAA,IACnD,SAASS;AAAA,IACT,WAAW;AAAA,IACX,gBAAgB;AAAA,EAAA,CACjB,GAEK;AAAA,IACJ,iBAAAC,IAAkB;AAAA,IAClB,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,qBAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,EAAC,IACbT,EAAQ;AAEZ,WAASI,EAAYM,GAAiBC,GAAqB;AAEzD,IAAIT,EAAQ,QAEVA,EAAQ,MAAM,KAAK,EAAE,MAAAQ,GAAY,SAASC,GAAM,IAGhDV,EAAK,EAAE,MAAAS,GAAY,SAASC,EAAA,CAAM,GAGpCjB,EAAQgB,GAAMC,CAAI;AAAA,EACpB;AAEA,2BACGC,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,GAAGd,EAAQ;AAAA,MAAA;AAAA,MAGb,UAAA,gBAAAe,EAACH,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,QAAAP,MAAoB,cAAcE,KAAeD,KAChD,gBAAAO;AAAA,UAACjB,EAAW;AAAA,UAAX;AAAA,YACC,YAAAU;AAAA,YACA,aAAAC;AAAA,YACA,OAAOT,EAAE,oBAAoB,EAAE,YAAAQ,GAAY,aAAAC,GAAa;AAAA,YACxD,KAAKP,EAAQ,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxBK,MAAoB,iBACnB,gBAAAU,EAACH,GAAA,EAAK,eAAc,OAAM,gBAAe,iBAAgB,YAAW,UAClE,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,aAAaT,IAAuBC,EAAYD,CAAmB,KAAK,CAAA,IAAM,CAAA;AAAA,cAC9E,qBAAAA;AAAA,cACA,SAASJ;AAAA,YAAA;AAAA,UAAA,GAEb;AAAA,UACA,gBAAAS,EAACG,GAAA,EACE,UAAAhB,EAAQ,QAAQ,oCAAmBA,EAAQ,QAAQ,gBAAhB,CAAA,CAA+B,EAAA,CACrE;AAAA,QAAA,GACF;AAAA,QAEDA,EAAQ,QAAQ,+BAAcA,EAAQ,QAAQ,WAAhB,CAAA,CAA0B;AAAA,MAAA,EAAA,CAC3D;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetails.d.ts

@@ -3,4 +3,4 @@ export interface ConfirmWireDetailsProps extends BaseComponentInterface {
     companyId: string;
     wireInId?: string;
 }
-export declare function ConfirmWireDetails({ companyId, wireInId, onEvent }: ConfirmWireDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmWireDetails(props: ConfirmWireDetailsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetails.js

@@ -1,57 +1,79 @@
-import { jsxs as u, jsx as s } from "react/jsx-runtime";
-import { createMachine as L } from "robot3";
-import { useMachine as O } from "react-robot";
-import { useState as W, useMemo as A } from "react";
-import { confirmWireDetailsMachine as M } from "./confirmWireDetailsStateMachine.js";
-import { useComponentContext as T } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { FlowContext as h } from "../../Flow/useFlow.js";
-import { payrollWireEvents as e } from "../../../shared/constants.js";
-import { ConfirmWireDetailsBanner as S } from "./ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.js";
-function j({ companyId: n, wireInId: r, onEvent: a }) {
-  const { Modal: f } = T(), [R, t] = W(!1), _ = A(
-    () => L(
+import { jsx as n, jsxs as M } from "react/jsx-runtime";
+import { createMachine as h } from "robot3";
+import { useMachine as S } from "react-robot";
+import { useState as T, useRef as v, useMemo as _ } from "react";
+import { useWireInRequestsListSuspense as x } from "@gusto/embedded-api/react-query/wireInRequestsList";
+import { confirmWireDetailsMachine as F } from "./confirmWireDetailsStateMachine.js";
+import { BaseComponent as N } from "../../Base/Base.js";
+import "../../Base/useBase.js";
+import { useComponentContext as D } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { FlowContext as P } from "../../Flow/useFlow.js";
+import { payrollWireEvents as r } from "../../../shared/constants.js";
+import { ConfirmWireDetailsBanner as Y } from "./ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.js";
+function Q(o) {
+  return /* @__PURE__ */ n(N, { ...o, children: /* @__PURE__ */ n(q, { ...o }) });
+}
+function q({ companyId: o, wireInId: t, onEvent: f }) {
+  const { Modal: p } = D(), [W, s] = T(!1), m = v(null), { data: E } = x({
+    companyUuid: o
+  }), l = (E.wireInRequestList || []).filter(
+    (e) => e.status === "awaiting_funds"
+  ), u = _(() => t || l[0]?.uuid, [t, l[0]?.uuid]), L = _(
+    () => h(
       "banner",
-      M,
+      F,
       () => ({
         component: null,
-        companyId: n,
-        wireInId: r,
-        onEvent: i
+        companyId: o,
+        wireInId: t,
+        selectedWireInId: u,
+        onEvent: i,
+        modalContainerRef: m
       })
     ),
-    [n, r]
-  ), [l, C] = O(_);
-  function i(o, c) {
-    C({ type: o, payload: c }), o === e.PAYROLL_WIRE_START_TRANSFER && t(!0), (o === e.PAYROLL_WIRE_INSTRUCTIONS_CANCEL || o === e.PAYROLL_WIRE_FORM_CANCEL || o === e.PAYROLL_WIRE_FORM_DONE) && t(!1), a(o, c);
+    [o, t, u]
+  ), [a, d] = S(L);
+  function i(e, C) {
+    d({ type: e, payload: C }), e === r.PAYROLL_WIRE_START_TRANSFER && s(!0), (e === r.PAYROLL_WIRE_INSTRUCTIONS_CANCEL || e === r.PAYROLL_WIRE_FORM_CANCEL || e === r.PAYROLL_WIRE_FORM_DONE) && s(!1), f(e, C);
   }
-  const E = () => {
-    i(e.PAYROLL_WIRE_START_TRANSFER);
-  }, p = () => {
-    t(!1);
-  }, m = l.context.component;
-  return /* @__PURE__ */ u(
-    h.Provider,
+  const A = () => {
+    i(r.PAYROLL_WIRE_START_TRANSFER);
+  }, O = () => {
+    s(!1);
+  }, c = a.context.component, R = c?.Footer || void 0;
+  return /* @__PURE__ */ M(
+    P.Provider,
     {
       value: {
-        ...l.context,
+        ...a.context,
         onEvent: i
       },
       children: [
-        /* @__PURE__ */ s(
-          S,
+        /* @__PURE__ */ n(
+          Y,
           {
-            companyId: n,
-            wireInId: r,
-            onStartWireTransfer: E,
-            onEvent: a
+            companyId: o,
+            wireInId: t,
+            onStartWireTransfer: A,
+            onEvent: f,
+            confirmationAlert: a.context.confirmationAlert
           }
         ),
-        /* @__PURE__ */ s(f, { isOpen: R, onClose: p, children: m && /* @__PURE__ */ s(m, {}) })
+        /* @__PURE__ */ n(
+          p,
+          {
+            isOpen: W,
+            onClose: O,
+            containerRef: m,
+            footer: R && /* @__PURE__ */ n(R, { onEvent: i }),
+            children: c && /* @__PURE__ */ n(c, {})
+          }
+        )
       ]
     }
   );
 }
 export {
-  j as ConfirmWireDetails
+  Q as ConfirmWireDetails
 };
 //# sourceMappingURL=ConfirmWireDetails.js.map

package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmWireDetails.js","sources":["../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetails.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMachine } from 'react-robot'\nimport { useMemo, useState } from 'react'\nimport { ConfirmWireDetailsBanner } from './ConfirmWireDetailsBanner'\nimport { confirmWireDetailsMachine } from './confirmWireDetailsStateMachine'\nimport { type ConfirmWireDetailsContextInterface } from './ConfirmWireDetailsComponents'\nimport { type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { FlowContext } from '@/components/Flow/useFlow'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\n\nexport interface ConfirmWireDetailsProps extends BaseComponentInterface {\n  companyId: string\n  wireInId?: string\n}\n\nexport function ConfirmWireDetails({ companyId, wireInId, onEvent }: ConfirmWireDetailsProps) {\n  const { Modal } = useComponentContext()\n  const [isModalOpen, setIsModalOpen] = useState(false)\n\n  const confirmWireDetailsMachineInstance = useMemo(\n    () =>\n      createMachine(\n        'banner',\n        confirmWireDetailsMachine,\n        (): ConfirmWireDetailsContextInterface => ({\n          component: null,\n          companyId,\n          wireInId,\n          onEvent: handleEvent,\n        }),\n      ),\n    [companyId, wireInId],\n  )\n\n  const [current, send] = useMachine(confirmWireDetailsMachineInstance)\n\n  function handleEvent(type: EventType, data?: unknown) {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    send({ type, payload: data })\n\n    if (type === payrollWireEvents.PAYROLL_WIRE_START_TRANSFER) {\n      setIsModalOpen(true)\n    }\n\n    if (\n      type === payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_CANCEL ||\n      type === payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL ||\n      type === payrollWireEvents.PAYROLL_WIRE_FORM_DONE\n    ) {\n      setIsModalOpen(false)\n    }\n\n    onEvent(type, data)\n  }\n\n  const handleStartWireTransfer = () => {\n    handleEvent(payrollWireEvents.PAYROLL_WIRE_START_TRANSFER)\n  }\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false)\n  }\n\n  const CurrentComponent = current.context.component\n\n  return (\n    <FlowContext.Provider\n      value={{\n        ...current.context,\n        onEvent: handleEvent,\n      }}\n    >\n      <ConfirmWireDetailsBanner\n        companyId={companyId}\n        wireInId={wireInId}\n        onStartWireTransfer={handleStartWireTransfer}\n        onEvent={onEvent}\n      />\n      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>\n        {CurrentComponent && <CurrentComponent />}\n      </Modal>\n    </FlowContext.Provider>\n  )\n}\n"],"names":["ConfirmWireDetails","companyId","wireInId","onEvent","Modal","useComponentContext","isModalOpen","setIsModalOpen","useState","confirmWireDetailsMachineInstance","useMemo","createMachine","confirmWireDetailsMachine","handleEvent","current","send","useMachine","type","data","payrollWireEvents","handleStartWireTransfer","handleCloseModal","CurrentComponent","jsxs","FlowContext","jsx","ConfirmWireDetailsBanner"],"mappings":";;;;;;;;;AAgBO,SAASA,EAAmB,EAAE,WAAAC,GAAW,UAAAC,GAAU,SAAAC,KAAoC;AAC5F,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAA,GACZ,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAE9CC,IAAoCC;AAAA,IACxC,MACEC;AAAA,MACE;AAAA,MACAC;AAAA,MACA,OAA2C;AAAA,QACzC,WAAW;AAAA,QACX,WAAAX;AAAA,QACA,UAAAC;AAAA,QACA,SAASW;AAAA,MAAA;AAAA,IACX;AAAA,IAEJ,CAACZ,GAAWC,CAAQ;AAAA,EAAA,GAGhB,CAACY,GAASC,CAAI,IAAIC,EAAWP,CAAiC;AAEpE,WAASI,EAAYI,GAAiBC,GAAgB;AAEpD,IAAAH,EAAK,EAAE,MAAAE,GAAM,SAASC,EAAA,CAAM,GAExBD,MAASE,EAAkB,+BAC7BZ,EAAe,EAAI,IAInBU,MAASE,EAAkB,oCAC3BF,MAASE,EAAkB,4BAC3BF,MAASE,EAAkB,2BAE3BZ,EAAe,EAAK,GAGtBJ,EAAQc,GAAMC,CAAI;AAAA,EACpB;AAEA,QAAME,IAA0B,MAAM;AACpC,IAAAP,EAAYM,EAAkB,2BAA2B;AAAA,EAC3D,GAEME,IAAmB,MAAM;AAC7B,IAAAd,EAAe,EAAK;AAAA,EACtB,GAEMe,IAAmBR,EAAQ,QAAQ;AAEzC,SACE,gBAAAS;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,GAAGV,EAAQ;AAAA,QACX,SAASD;AAAA,MAAA;AAAA,MAGX,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAAzB;AAAA,YACA,UAAAC;AAAA,YACA,qBAAqBkB;AAAA,YACrB,SAAAjB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAsB,EAACrB,KAAM,QAAQE,GAAa,SAASe,GAClC,UAAAC,KAAoB,gBAAAG,EAACH,GAAA,CAAA,CAAiB,EAAA,CACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ConfirmWireDetails.js","sources":["../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetails.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMachine } from 'react-robot'\nimport { useMemo, useRef, useState } from 'react'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api/react-query/wireInRequestsList'\nimport { ConfirmWireDetailsBanner } from './ConfirmWireDetailsBanner'\nimport { confirmWireDetailsMachine } from './confirmWireDetailsStateMachine'\nimport { type ConfirmWireDetailsContextInterface } from './ConfirmWireDetailsComponents'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { FlowContext } from '@/components/Flow/useFlow'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\n\nexport interface ConfirmWireDetailsProps extends BaseComponentInterface {\n  companyId: string\n  wireInId?: string\n}\n\nexport function ConfirmWireDetails(props: ConfirmWireDetailsProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props} />\n    </BaseComponent>\n  )\n}\n\nfunction Root({ companyId, wireInId, onEvent }: ConfirmWireDetailsProps) {\n  const { Modal } = useComponentContext()\n  const [isModalOpen, setIsModalOpen] = useState(false)\n  const modalContainerRef = useRef<HTMLDivElement>(null)\n\n  const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n    companyUuid: companyId,\n  })\n\n  const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n    r => r.status === 'awaiting_funds',\n  )\n\n  const selectedWireInId = useMemo(() => {\n    if (wireInId) {\n      return wireInId\n    }\n\n    return activeWireInRequests[0]?.uuid\n  }, [wireInId, activeWireInRequests[0]?.uuid])\n\n  const confirmWireDetailsMachineInstance = useMemo(\n    () =>\n      createMachine(\n        'banner',\n        confirmWireDetailsMachine,\n        (): ConfirmWireDetailsContextInterface => ({\n          component: null,\n          companyId,\n          wireInId,\n          selectedWireInId,\n          onEvent: handleEvent,\n          modalContainerRef,\n        }),\n      ),\n    [companyId, wireInId, selectedWireInId],\n  )\n  const [current, send] = useMachine(confirmWireDetailsMachineInstance)\n\n  function handleEvent(type: EventType, data?: unknown) {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    send({ type, payload: data })\n\n    if (type === payrollWireEvents.PAYROLL_WIRE_START_TRANSFER) {\n      setIsModalOpen(true)\n    }\n\n    if (\n      type === payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_CANCEL ||\n      type === payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL ||\n      type === payrollWireEvents.PAYROLL_WIRE_FORM_DONE\n    ) {\n      setIsModalOpen(false)\n    }\n\n    onEvent(type, data)\n  }\n\n  const handleStartWireTransfer = () => {\n    handleEvent(payrollWireEvents.PAYROLL_WIRE_START_TRANSFER)\n  }\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false)\n  }\n\n  const CurrentComponent = current.context.component\n  const Footer = CurrentComponent?.Footer || undefined\n\n  return (\n    <FlowContext.Provider\n      value={{\n        ...current.context,\n        onEvent: handleEvent,\n      }}\n    >\n      <ConfirmWireDetailsBanner\n        companyId={companyId}\n        wireInId={wireInId}\n        onStartWireTransfer={handleStartWireTransfer}\n        onEvent={onEvent}\n        confirmationAlert={current.context.confirmationAlert}\n      />\n      <Modal\n        isOpen={isModalOpen}\n        onClose={handleCloseModal}\n        containerRef={modalContainerRef}\n        footer={Footer && <Footer onEvent={handleEvent} />}\n      >\n        {CurrentComponent && <CurrentComponent />}\n      </Modal>\n    </FlowContext.Provider>\n  )\n}\n"],"names":["ConfirmWireDetails","props","jsx","BaseComponent","Root","companyId","wireInId","onEvent","Modal","useComponentContext","isModalOpen","setIsModalOpen","useState","modalContainerRef","useRef","wireInRequestsData","useWireInRequestsListSuspense","activeWireInRequests","r","selectedWireInId","useMemo","confirmWireDetailsMachineInstance","createMachine","confirmWireDetailsMachine","handleEvent","current","send","useMachine","type","data","payrollWireEvents","handleStartWireTransfer","handleCloseModal","CurrentComponent","Footer","jsxs","FlowContext","ConfirmWireDetailsBanner"],"mappings":";;;;;;;;;;;;AAiBO,SAASA,EAAmBC,GAAgC;AACjE,SACE,gBAAAC,EAACC,KAAe,GAAGF,GACjB,4BAACG,GAAA,EAAM,GAAGH,GAAO,EAAA,CACnB;AAEJ;AAEA,SAASG,EAAK,EAAE,WAAAC,GAAW,UAAAC,GAAU,SAAAC,KAAoC;AACvE,QAAM,EAAE,OAAAC,EAAA,IAAUC,EAAA,GACZ,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9CC,IAAoBC,EAAuB,IAAI,GAE/C,EAAE,MAAMC,EAAA,IAAuBC,EAA8B;AAAA,IACjE,aAAaX;AAAA,EAAA,CACd,GAEKY,KAAwBF,EAAmB,qBAAqB,CAAA,GAAI;AAAA,IACxE,CAAAG,MAAKA,EAAE,WAAW;AAAA,EAAA,GAGdC,IAAmBC,EAAQ,MAC3Bd,KAIGW,EAAqB,CAAC,GAAG,MAC/B,CAACX,GAAUW,EAAqB,CAAC,GAAG,IAAI,CAAC,GAEtCI,IAAoCD;AAAA,IACxC,MACEE;AAAA,MACE;AAAA,MACAC;AAAA,MACA,OAA2C;AAAA,QACzC,WAAW;AAAA,QACX,WAAAlB;AAAA,QACA,UAAAC;AAAA,QACA,kBAAAa;AAAA,QACA,SAASK;AAAA,QACT,mBAAAX;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACR,GAAWC,GAAUa,CAAgB;AAAA,EAAA,GAElC,CAACM,GAASC,CAAI,IAAIC,EAAWN,CAAiC;AAEpE,WAASG,EAAYI,GAAiBC,GAAgB;AAEpD,IAAAH,EAAK,EAAE,MAAAE,GAAM,SAASC,EAAA,CAAM,GAExBD,MAASE,EAAkB,+BAC7BnB,EAAe,EAAI,IAInBiB,MAASE,EAAkB,oCAC3BF,MAASE,EAAkB,4BAC3BF,MAASE,EAAkB,2BAE3BnB,EAAe,EAAK,GAGtBJ,EAAQqB,GAAMC,CAAI;AAAA,EACpB;AAEA,QAAME,IAA0B,MAAM;AACpC,IAAAP,EAAYM,EAAkB,2BAA2B;AAAA,EAC3D,GAEME,IAAmB,MAAM;AAC7B,IAAArB,EAAe,EAAK;AAAA,EACtB,GAEMsB,IAAmBR,EAAQ,QAAQ,WACnCS,IAASD,GAAkB,UAAU;AAE3C,SACE,gBAAAE;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,GAAGX,EAAQ;AAAA,QACX,SAASD;AAAA,MAAA;AAAA,MAGX,UAAA;AAAA,QAAA,gBAAAtB;AAAA,UAACmC;AAAA,UAAA;AAAA,YACC,WAAAhC;AAAA,YACA,UAAAC;AAAA,YACA,qBAAqByB;AAAA,YACrB,SAAAxB;AAAA,YACA,mBAAmBkB,EAAQ,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAErC,gBAAAvB;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,QAAQE;AAAA,YACR,SAASsB;AAAA,YACT,cAAcnB;AAAA,YACd,QAAQqB,KAAU,gBAAAhC,EAACgC,GAAA,EAAO,SAASV,GAAa;AAAA,YAE/C,UAAAS,uBAAqBA,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,MACzC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.d.ts

@@ -1,7 +1,9 @@
+import { ConfirmationAlert } from '../types';
 import { BaseComponentInterface } from '../../../Base';
 interface ConfirmWireDetailsBannerProps extends BaseComponentInterface<'Payroll.ConfirmWireDetailsBanner'> {
     wireInId?: string;
     companyId: string;
+    confirmationAlert?: ConfirmationAlert;
     onStartWireTransfer: () => void;
 }
 export declare function ConfirmWireDetailsBanner(props: ConfirmWireDetailsBannerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.js

@@ -1,79 +1,96 @@
-import { jsx as r, jsxs as x } from "react/jsx-runtime";
-import { useTranslation as S } from "react-i18next";
-import { useWireInRequestsListSuspense as I } from "@gusto/embedded-api/react-query/wireInRequestsList";
-import { usePayrollsListSuspense as T } from "@gusto/embedded-api/react-query/payrollsList";
-import { BaseComponent as U } from "../../../Base/Base.js";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { useTranslation as T } from "react-i18next";
+import { useWireInRequestsListSuspense as v } from "@gusto/embedded-api/react-query/wireInRequestsList";
+import { usePayrollsListSuspense as M } from "@gusto/embedded-api/react-query/payrollsList";
+import { useState as F, useEffect as Z } from "react";
+import { BaseComponent as _ } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
-import { useComponentContext as A } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useComponentDictionary as b, useI18n as v } from "../../../../i18n/I18n.js";
-import { Flex as M } from "../../../Common/Flex/Flex.js";
-import { useDateFormatter as F } from "../../../../hooks/useDateFormatter.js";
-function Q(n) {
-  return /* @__PURE__ */ r(U, { ...n, children: /* @__PURE__ */ r(Z, { ...n, children: n.children }) });
+import { useComponentContext as j } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useComponentDictionary as k, useI18n as E } from "../../../../i18n/I18n.js";
+import { Flex as g } from "../../../Common/Flex/Flex.js";
+import { useDateFormatter as N } from "../../../../hooks/useDateFormatter.js";
+function te(i) {
+  return /* @__PURE__ */ r(_, { ...i, children: /* @__PURE__ */ r(z, { ...i, children: i.children }) });
 }
-const Z = ({
-  wireInId: n,
-  companyId: m,
-  dictionary: d,
-  onStartWireTransfer: p
+const z = ({
+  wireInId: i,
+  companyId: u,
+  dictionary: y,
+  confirmationAlert: o,
+  onStartWireTransfer: D
 }) => {
-  b("Payroll.ConfirmWireDetailsBanner", d), v("Payroll.ConfirmWireDetailsBanner");
-  const { t: i } = S("Payroll.ConfirmWireDetailsBanner"), { Banner: f, Button: y, UnorderedList: g, Text: h } = A(), D = F(), { data: R } = I({
-    companyUuid: m
-  }), { data: P } = T({
-    companyId: m,
+  k("Payroll.ConfirmWireDetailsBanner", y), E("Payroll.ConfirmWireDetailsBanner");
+  const { t: s } = T("Payroll.ConfirmWireDetailsBanner"), { Alert: R, Banner: w, Button: C, UnorderedList: P, Text: S } = j(), L = N(), [W, c] = F(!1);
+  Z(() => {
+    o && c(!1);
+  }, [o]);
+  const { data: x } = v({
+    companyUuid: u
+  }), { data: B } = M({
+    companyId: u,
     processed: !0
-  }), u = (R.wireInRequestList || []).filter(
-    (e) => e.status === "awaiting_funds"
-  ), w = n ? u.filter((e) => e.uuid === n) : u, C = P.payrollList || [], o = w.map((e) => {
-    const t = C.find((l) => l.payrollUuid === e.paymentUuid), c = t?.payPeriod ? D.formatPayPeriodRange(t.payPeriod.startDate, t.payPeriod.endDate) : "";
+  }), d = (x.wireInRequestList || []).filter(
+    (t) => t.status === "awaiting_funds"
+  ), q = i ? d.filter((t) => t.uuid === i) : d, I = B.payrollList || [], n = q.map((t) => {
+    const e = I.find((a) => a.payrollUuid === t.paymentUuid), l = e?.payPeriod ? L.formatPayPeriodRange(e.payPeriod.startDate, e.payPeriod.endDate) : "";
     return {
-      wireInRequest: e,
-      payroll: t,
-      payrollRange: c
+      wireInRequest: t,
+      payroll: e,
+      payrollRange: l
     };
-  });
-  if (o.length === 0)
+  }), f = n.length > 0 && (n.length > 1 || n[0]?.wireInRequest), p = !W && o;
+  if (!f && !p)
     return null;
-  const a = o.length === 1, { wireInRequest: s, payrollRange: L } = o[0] || {};
-  if (a && !s)
-    return null;
-  const W = (e) => {
-    const t = new Date(e), l = t.toLocaleTimeString("en-US", {
+  const U = (t) => {
+    const e = new Date(t), a = e.toLocaleTimeString("en-US", {
       hour: "numeric",
-      minute: t.getMinutes() === 0 ? void 0 : "2-digit",
+      minute: e.getMinutes() === 0 ? void 0 : "2-digit",
       hour12: !0,
       timeZone: "America/Los_Angeles",
       timeZoneName: "short"
-    }).replace(/\s?(AM|PM)/i, (q) => q.trim().toLowerCase()), B = t.toLocaleDateString("en-US", {
+    }).replace(/\s?(AM|PM)/i, (A) => A.trim().toLowerCase()), m = e.toLocaleDateString("en-US", {
       month: "long",
       day: "numeric",
       year: "numeric",
       timeZone: "America/Los_Angeles"
     });
-    return { time: l, date: B };
-  };
-  return /* @__PURE__ */ r(f, { status: "warning", title: (() => {
-    if (a) {
-      if (n && s?.wireInDeadline) {
-        const { time: e, date: t } = W(s.wireInDeadline);
-        return i("banner.title", { time: e, date: t });
+    return { time: a, date: m };
+  }, b = () => {
+    const t = n.length === 1, { wireInRequest: e, payrollRange: l } = n[0] || {};
+    if (t) {
+      if (i && e?.wireInDeadline) {
+        const { time: a, date: m } = U(e.wireInDeadline);
+        return s("banner.title", { time: a, date: m });
       }
-      return i("banner.titleWithPayroll", { payrollRange: L });
+      return s("banner.titleWithPayroll", { payrollRange: l });
     }
-    return i("banner.titleMultiple", { count: o.length });
-  })(), children: /* @__PURE__ */ x(M, { flexDirection: "column", gap: 16, alignItems: "flex-start", children: [
-    /* @__PURE__ */ r("div", { children: i("banner.description") }),
-    !a && /* @__PURE__ */ r(
-      g,
+    return s("banner.titleMultiple", { count: n.length });
+  };
+  return /* @__PURE__ */ h(g, { flexDirection: "column", gap: 16, children: [
+    p && /* @__PURE__ */ r(
+      R,
       {
-        items: o.map(({ payrollRange: e }, t) => /* @__PURE__ */ r(h, { children: e }, t))
+        status: "success",
+        label: o.title,
+        onDismiss: () => {
+          c(!0);
+        },
+        children: o.content
       }
     ),
-    /* @__PURE__ */ r(y, { variant: "secondary", onClick: p, children: i("cta.startWireTransfer") })
-  ] }) });
+    f && /* @__PURE__ */ r(w, { status: "warning", title: b(), children: /* @__PURE__ */ h(g, { flexDirection: "column", gap: 16, alignItems: "flex-start", children: [
+      /* @__PURE__ */ r("div", { children: s("banner.description") }),
+      n.length > 1 && /* @__PURE__ */ r(
+        P,
+        {
+          items: n.map(({ payrollRange: t }, e) => /* @__PURE__ */ r(S, { children: t }, e))
+        }
+      ),
+      /* @__PURE__ */ r(C, { variant: "secondary", onClick: D, children: s("cta.startWireTransfer") })
+    ] }) })
+  ] });
 };
 export {
-  Q as ConfirmWireDetailsBanner
+  te as ConfirmWireDetailsBanner
 };
 //# sourceMappingURL=ConfirmWireDetailsBanner.js.map