@gusto/embedded-react-sdk 0.20.0 → 0.22.0

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 styles from './ConfirmWireDetails.module.scss'\nimport { BaseComponent, BaseBoundaries, 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, LoadingSpinner } = 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],\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={\n          Footer && (\n            <BaseBoundaries\n              LoaderComponent={() => (\n                <div className={styles.footer}>\n                  <LoadingSpinner size=\"sm\" />\n                </div>\n              )}\n            >\n              <Footer onEvent={handleEvent} />\n            </BaseBoundaries>\n          )\n        }\n      >\n        {CurrentComponent && <CurrentComponent />}\n      </Modal>\n    </FlowContext.Provider>\n  )\n}\n"],"names":["ConfirmWireDetails","props","jsx","BaseComponent","Root","companyId","wireInId","onEvent","Modal","LoadingSpinner","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","BaseBoundaries","styles"],"mappings":";;;;;;;;;;;;;AAkBO,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,GAAO,gBAAAC,EAAA,IAAmBC,EAAA,GAC5B,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9CC,IAAoBC,EAAuB,IAAI,GAE/C,EAAE,MAAMC,EAAA,IAAuBC,EAA8B;AAAA,IACjE,aAAaZ;AAAA,EAAA,CACd,GAEKa,KAAwBF,EAAmB,qBAAqB,CAAA,GAAI;AAAA,IACxE,CAAAG,MAAKA,EAAE,WAAW;AAAA,EAAA,GAGdC,IAAmBC,EAAQ,MAC3Bf,KAIGY,EAAqB,CAAC,GAAG,MAC/B,CAACZ,GAAUY,EAAqB,CAAC,GAAG,IAAI,CAAC,GAEtCI,IAAoCD;AAAA,IACxC,MACEE;AAAA,MACE;AAAA,MACAC;AAAA,MACA,OAA2C;AAAA,QACzC,WAAW;AAAA,QACX,WAAAnB;AAAA,QACA,UAAAC;AAAA,QACA,kBAAAc;AAAA,QACA,SAASK;AAAA,QACT,mBAAAX;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACT,GAAWC,CAAQ;AAAA,EAAA,GAEhB,CAACoB,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,GAGtBL,EAAQsB,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,gBAAAvB;AAAA,UAACoC;AAAA,UAAA;AAAA,YACC,WAAAjC;AAAA,YACA,UAAAC;AAAA,YACA,qBAAqB0B;AAAA,YACrB,SAAAzB;AAAA,YACA,mBAAmBmB,EAAQ,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAErC,gBAAAxB;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,QAAQG;AAAA,YACR,SAASsB;AAAA,YACT,cAAcnB;AAAA,YACd,QACEqB,KACE,gBAAAjC;AAAA,cAACqC;AAAA,cAAA;AAAA,gBACC,iBAAiB,MACf,gBAAArC,EAAC,OAAA,EAAI,WAAWsC,EAAO,QACrB,UAAA,gBAAAtC,EAACO,GAAA,EAAe,MAAK,KAAA,CAAK,EAAA,CAC5B;AAAA,gBAGF,UAAA,gBAAAP,EAACiC,GAAA,EAAO,SAASV,EAAA,CAAa;AAAA,cAAA;AAAA,YAAA;AAAA,YAKnC,UAAAS,uBAAqBA,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,MACzC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,8 @@
+const o = "_footer_1evu5_1", t = {
+  footer: o
+};
+export {
+  t as default,
+  o as footer
+};
+//# sourceMappingURL=ConfirmWireDetails.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmWireDetails.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmWireDetailsBanner.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api/react-query/wireInRequestsList'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\n\ninterface ConfirmWireDetailsBannerProps\n  extends BaseComponentInterface<'Payroll.ConfirmWireDetailsBanner'> {\n  wireInId?: string\n  companyId: string\n  onStartWireTransfer: () => void\n}\n\nexport function ConfirmWireDetailsBanner(props: ConfirmWireDetailsBannerProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({\n  wireInId,\n  companyId,\n  dictionary,\n  onStartWireTransfer,\n}: ConfirmWireDetailsBannerProps) => {\n  useComponentDictionary('Payroll.ConfirmWireDetailsBanner', dictionary)\n  useI18n('Payroll.ConfirmWireDetailsBanner')\n  const { t } = useTranslation('Payroll.ConfirmWireDetailsBanner')\n  const { Banner, Button, UnorderedList, Text } = useComponentContext()\n  const dateFormatter = useDateFormatter()\n\n  const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n    companyUuid: companyId,\n  })\n\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processed: true,\n  })\n\n  const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n    request => request.status === 'awaiting_funds',\n  )\n  const wireInRequests = wireInId\n    ? activeWireInRequests.filter(request => request.uuid === wireInId)\n    : activeWireInRequests\n\n  const payrolls = payrollsData.payrollList || []\n\n  const wireInRequestsWithPayrolls = wireInRequests.map(wireInRequest => {\n    const payroll = payrolls.find(p => p.payrollUuid === wireInRequest.paymentUuid)\n    const payrollRange = payroll?.payPeriod\n      ? dateFormatter.formatPayPeriodRange(payroll.payPeriod.startDate, payroll.payPeriod.endDate)\n      : ''\n    return {\n      wireInRequest,\n      payroll,\n      payrollRange,\n    }\n  })\n\n  if (wireInRequestsWithPayrolls.length === 0) {\n    return null\n  }\n\n  const isSingleWireInRequest = wireInRequestsWithPayrolls.length === 1\n  const { wireInRequest, payrollRange } = wireInRequestsWithPayrolls[0] || {}\n\n  if (isSingleWireInRequest && !wireInRequest) {\n    return null\n  }\n\n  const formatDeadline = (deadline: string) => {\n    const date = new Date(deadline)\n\n    const timeRaw = date.toLocaleTimeString('en-US', {\n      hour: 'numeric',\n      minute: date.getMinutes() === 0 ? undefined : '2-digit',\n      hour12: true,\n      timeZone: 'America/Los_Angeles',\n      timeZoneName: 'short',\n    })\n\n    const time = timeRaw.replace(/\\s?(AM|PM)/i, match => match.trim().toLowerCase())\n\n    const dateString = date.toLocaleDateString('en-US', {\n      month: 'long',\n      day: 'numeric',\n      year: 'numeric',\n      timeZone: 'America/Los_Angeles',\n    })\n\n    return { time, date: dateString }\n  }\n\n  const getBannerTitle = () => {\n    if (isSingleWireInRequest) {\n      if (wireInId && wireInRequest?.wireInDeadline) {\n        const { time, date } = formatDeadline(wireInRequest.wireInDeadline)\n        return t('banner.title', { time, date })\n      }\n      return t('banner.titleWithPayroll', { payrollRange })\n    }\n    return t('banner.titleMultiple', { count: wireInRequestsWithPayrolls.length })\n  }\n\n  return (\n    <Banner status=\"warning\" title={getBannerTitle()}>\n      <Flex flexDirection=\"column\" gap={16} alignItems=\"flex-start\">\n        <div>{t('banner.description')}</div>\n        {!isSingleWireInRequest && (\n          <UnorderedList\n            items={wireInRequestsWithPayrolls.map(({ payrollRange }, index) => (\n              <Text key={index}>{payrollRange}</Text>\n            ))}\n          />\n        )}\n        <Button variant=\"secondary\" onClick={onStartWireTransfer}>\n          {t('cta.startWireTransfer')}\n        </Button>\n      </Flex>\n    </Banner>\n  )\n}\n"],"names":["ConfirmWireDetailsBanner","props","jsx","BaseComponent","Root","wireInId","companyId","dictionary","onStartWireTransfer","useComponentDictionary","useI18n","t","useTranslation","Banner","Button","UnorderedList","Text","useComponentContext","dateFormatter","useDateFormatter","wireInRequestsData","useWireInRequestsListSuspense","payrollsData","usePayrollsListSuspense","activeWireInRequests","request","wireInRequests","payrolls","wireInRequestsWithPayrolls","wireInRequest","payroll","p","payrollRange","isSingleWireInRequest","formatDeadline","deadline","date","time","match","dateString","jsxs","Flex","index"],"mappings":"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"}
+{"version":3,"file":"ConfirmWireDetailsBanner.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsBanner/ConfirmWireDetailsBanner.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api/react-query/wireInRequestsList'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport { useState, useEffect } from 'react'\nimport type { ConfirmationAlert } from '../types'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\n\ninterface ConfirmWireDetailsBannerProps extends BaseComponentInterface<'Payroll.ConfirmWireDetailsBanner'> {\n  wireInId?: string\n  companyId: string\n  confirmationAlert?: ConfirmationAlert\n  onStartWireTransfer: () => void\n}\n\nexport function ConfirmWireDetailsBanner(props: ConfirmWireDetailsBannerProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({\n  wireInId,\n  companyId,\n  dictionary,\n  confirmationAlert,\n  onStartWireTransfer,\n}: ConfirmWireDetailsBannerProps) => {\n  useComponentDictionary('Payroll.ConfirmWireDetailsBanner', dictionary)\n  useI18n('Payroll.ConfirmWireDetailsBanner')\n  const { t } = useTranslation('Payroll.ConfirmWireDetailsBanner')\n  const { Alert, Banner, Button, UnorderedList, Text } = useComponentContext()\n  const dateFormatter = useDateFormatter()\n  const [isConfirmationAlertDismissed, setIsConfirmationAlertDismissed] = useState<boolean>(false)\n\n  useEffect(() => {\n    if (confirmationAlert) {\n      setIsConfirmationAlertDismissed(false)\n    }\n  }, [confirmationAlert])\n\n  const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n    companyUuid: companyId,\n  })\n\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processed: true,\n  })\n\n  const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n    request => request.status === 'awaiting_funds',\n  )\n  const wireInRequests = wireInId\n    ? activeWireInRequests.filter(request => request.uuid === wireInId)\n    : activeWireInRequests\n\n  const payrolls = payrollsData.payrollList || []\n\n  const wireInRequestsWithPayrolls = wireInRequests.map(wireInRequest => {\n    const payroll = payrolls.find(p => p.payrollUuid === wireInRequest.paymentUuid)\n    const payrollRange = payroll?.payPeriod\n      ? dateFormatter.formatPayPeriodRange(payroll.payPeriod.startDate, payroll.payPeriod.endDate)\n      : ''\n    return {\n      wireInRequest,\n      payroll,\n      payrollRange,\n    }\n  })\n\n  const shouldShowBanner =\n    wireInRequestsWithPayrolls.length > 0 &&\n    (wireInRequestsWithPayrolls.length > 1 || wireInRequestsWithPayrolls[0]?.wireInRequest)\n\n  const shouldShowConfirmationAlert = !isConfirmationAlertDismissed && confirmationAlert\n\n  if (!shouldShowBanner && !shouldShowConfirmationAlert) {\n    return null\n  }\n\n  const formatDeadline = (deadline: string) => {\n    const date = new Date(deadline)\n\n    const timeRaw = date.toLocaleTimeString('en-US', {\n      hour: 'numeric',\n      minute: date.getMinutes() === 0 ? undefined : '2-digit',\n      hour12: true,\n      timeZone: 'America/Los_Angeles',\n      timeZoneName: 'short',\n    })\n\n    const time = timeRaw.replace(/\\s?(AM|PM)/i, match => match.trim().toLowerCase())\n\n    const dateString = date.toLocaleDateString('en-US', {\n      month: 'long',\n      day: 'numeric',\n      year: 'numeric',\n      timeZone: 'America/Los_Angeles',\n    })\n\n    return { time, date: dateString }\n  }\n\n  const getBannerTitle = () => {\n    const isSingleWireInRequest = wireInRequestsWithPayrolls.length === 1\n    const { wireInRequest, payrollRange } = wireInRequestsWithPayrolls[0] || {}\n\n    if (isSingleWireInRequest) {\n      if (wireInId && wireInRequest?.wireInDeadline) {\n        const { time, date } = formatDeadline(wireInRequest.wireInDeadline)\n        return t('banner.title', { time, date })\n      }\n      return t('banner.titleWithPayroll', { payrollRange })\n    }\n    return t('banner.titleMultiple', { count: wireInRequestsWithPayrolls.length })\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {shouldShowConfirmationAlert && (\n        <Alert\n          status=\"success\"\n          label={confirmationAlert.title}\n          onDismiss={() => {\n            setIsConfirmationAlertDismissed(true)\n          }}\n        >\n          {confirmationAlert.content}\n        </Alert>\n      )}\n      {shouldShowBanner && (\n        <Banner status=\"warning\" title={getBannerTitle()}>\n          <Flex flexDirection=\"column\" gap={16} alignItems=\"flex-start\">\n            <div>{t('banner.description')}</div>\n            {wireInRequestsWithPayrolls.length > 1 && (\n              <UnorderedList\n                items={wireInRequestsWithPayrolls.map(({ payrollRange }, index) => (\n                  <Text key={index}>{payrollRange}</Text>\n                ))}\n              />\n            )}\n            <Button variant=\"secondary\" onClick={onStartWireTransfer}>\n              {t('cta.startWireTransfer')}\n            </Button>\n          </Flex>\n        </Banner>\n      )}\n    </Flex>\n  )\n}\n"],"names":["ConfirmWireDetailsBanner","props","jsx","BaseComponent","Root","wireInId","companyId","dictionary","confirmationAlert","onStartWireTransfer","useComponentDictionary","useI18n","t","useTranslation","Alert","Banner","Button","UnorderedList","Text","useComponentContext","dateFormatter","useDateFormatter","isConfirmationAlertDismissed","setIsConfirmationAlertDismissed","useState","useEffect","wireInRequestsData","useWireInRequestsListSuspense","payrollsData","usePayrollsListSuspense","activeWireInRequests","request","wireInRequests","payrolls","wireInRequestsWithPayrolls","wireInRequest","payroll","p","payrollRange","shouldShowBanner","shouldShowConfirmationAlert","formatDeadline","deadline","date","time","match","dateString","getBannerTitle","isSingleWireInRequest","jsxs","Flex","index"],"mappings":"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"}

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

@@ -1,7 +1,30 @@
+import { ConfirmationAlert } from './types';
 import { FlowContextInterface } from '../../Flow/useFlow';
+import { CommonComponentInterface } from '../../Base';
+import { EventType } from '../../../types/Helpers';
+import { OnEventType } from '../../Base/useBase';
 export interface ConfirmWireDetailsContextInterface extends FlowContextInterface {
     companyId: string;
     wireInId?: string;
+    selectedWireInId?: string;
+    modalContainerRef?: React.RefObject<HTMLDivElement | null>;
+    showOnlyCloseButton?: boolean;
+    confirmationAlert?: ConfirmationAlert;
+    component: (React.ComponentType<CommonComponentInterface> & {
+        Footer?: React.ComponentType<{
+            onEvent: OnEventType<EventType, unknown>;
+        }>;
+    }) | null;
 }
 export declare function WireInstructionsContextual(): import("react/jsx-runtime").JSX.Element;
+export declare namespace WireInstructionsContextual {
+    var Footer: ({ onEvent }: {
+        onEvent: OnEventType<EventType, unknown>;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
 export declare function ConfirmWireDetailsFormContextual(): import("react/jsx-runtime").JSX.Element;
+export declare namespace ConfirmWireDetailsFormContextual {
+    var Footer: ({ onEvent }: {
+        onEvent: OnEventType<EventType, unknown>;
+    }) => import("react/jsx-runtime").JSX.Element;
+}

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

@@ -1,25 +1,37 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useFlow as e } from "../../Flow/useFlow.js";
-import { ensureRequired as i } from "../../../helpers/ensureRequired.js";
-import { ConfirmWireDetailsForm as m } from "./ConfirmWireDetailsForm/ConfirmWireDetailsForm.js";
-import { WireInstructions as s } from "./WireInstructions/WireInstructions.js";
+import { jsx as i } from "react/jsx-runtime";
+import { useFlow as m } from "../../Flow/useFlow.js";
+import { ensureRequired as t } from "../../../helpers/ensureRequired.js";
+import { ConfirmWireDetailsForm as I } from "./ConfirmWireDetailsForm/ConfirmWireDetailsForm.js";
+import { WireInstructions as d } from "./WireInstructions/WireInstructions.js";
 function a() {
-  const { companyId: o, wireInId: r, onEvent: n } = e();
-  return /* @__PURE__ */ t(s, { companyId: i(o), wireInId: r, onEvent: n });
-}
-function d() {
-  const { companyId: o, wireInId: r, onEvent: n } = e();
-  return /* @__PURE__ */ t(
-    m,
+  const { companyId: o, wireInId: r, selectedWireInId: e, onEvent: n, modalContainerRef: s } = m();
+  return /* @__PURE__ */ i(
+    d,
     {
-      companyId: i(o),
+      companyId: t(o),
       wireInId: r,
-      onEvent: n
+      selectedWireInId: e,
+      onEvent: n,
+      modalContainerRef: s
+    }
+  );
+}
+a.Footer = d.Footer;
+function c() {
+  const { selectedWireInId: o, companyId: r, onEvent: e, modalContainerRef: n } = m();
+  return /* @__PURE__ */ i(
+    I,
+    {
+      wireInId: t(o),
+      companyId: t(r),
+      onEvent: e,
+      modalContainerRef: n
     }
   );
 }
+c.Footer = I.Footer;
 export {
-  d as ConfirmWireDetailsFormContextual,
+  c as ConfirmWireDetailsFormContextual,
   a as WireInstructionsContextual
 };
 //# sourceMappingURL=ConfirmWireDetailsComponents.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmWireDetailsComponents.js","sources":["../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsComponents.tsx"],"sourcesContent":["import { WireInstructions } from './WireInstructions'\nimport { ConfirmWireDetailsForm } from './ConfirmWireDetailsForm'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport type { FlowContextInterface } from '@/components/Flow/useFlow'\n\nexport interface ConfirmWireDetailsContextInterface extends FlowContextInterface {\n  companyId: string\n  wireInId?: string\n}\n\nexport function WireInstructionsContextual() {\n  const { companyId, wireInId, onEvent } = useFlow<ConfirmWireDetailsContextInterface>()\n\n  return (\n    <WireInstructions companyId={ensureRequired(companyId)} wireInId={wireInId} onEvent={onEvent} />\n  )\n}\n\nexport function ConfirmWireDetailsFormContextual() {\n  const { companyId, wireInId, onEvent } = useFlow<ConfirmWireDetailsContextInterface>()\n\n  return (\n    <ConfirmWireDetailsForm\n      companyId={ensureRequired(companyId)}\n      wireInId={wireInId}\n      onEvent={onEvent}\n    />\n  )\n}\n"],"names":["WireInstructionsContextual","companyId","wireInId","onEvent","useFlow","WireInstructions","ensureRequired","ConfirmWireDetailsFormContextual","jsx","ConfirmWireDetailsForm"],"mappings":";;;;;AAWO,SAASA,IAA6B;AAC3C,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,SAAAC,EAAA,IAAYC,EAAA;AAEzC,2BACGC,GAAA,EAAiB,WAAWC,EAAeL,CAAS,GAAG,UAAAC,GAAoB,SAAAC,GAAkB;AAElG;AAEO,SAASI,IAAmC;AACjD,QAAM,EAAE,WAAAN,GAAW,UAAAC,GAAU,SAAAC,EAAA,IAAYC,EAAA;AAEzC,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWH,EAAeL,CAAS;AAAA,MACnC,UAAAC;AAAA,MACA,SAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ConfirmWireDetailsComponents.js","sources":["../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsComponents.tsx"],"sourcesContent":["import type { ConfirmationAlert } from './types'\nimport { WireInstructions } from './WireInstructions'\nimport { ConfirmWireDetailsForm } from './ConfirmWireDetailsForm'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport type { FlowContextInterface } from '@/components/Flow/useFlow'\nimport type { CommonComponentInterface } from '@/components/Base'\nimport type { EventType } from '@/types/Helpers'\nimport type { OnEventType } from '@/components/Base/useBase'\n\nexport interface ConfirmWireDetailsContextInterface extends FlowContextInterface {\n  companyId: string\n  wireInId?: string\n  selectedWireInId?: string\n  modalContainerRef?: React.RefObject<HTMLDivElement | null>\n  showOnlyCloseButton?: boolean\n  confirmationAlert?: ConfirmationAlert\n  component:\n    | (React.ComponentType<CommonComponentInterface> & {\n        Footer?: React.ComponentType<{\n          onEvent: OnEventType<EventType, unknown>\n        }>\n      })\n    | null\n}\n\nexport function WireInstructionsContextual() {\n  const { companyId, wireInId, selectedWireInId, onEvent, modalContainerRef } =\n    useFlow<ConfirmWireDetailsContextInterface>()\n\n  return (\n    <WireInstructions\n      companyId={ensureRequired(companyId)}\n      wireInId={wireInId}\n      selectedWireInId={selectedWireInId}\n      onEvent={onEvent}\n      modalContainerRef={modalContainerRef}\n    />\n  )\n}\n\nWireInstructionsContextual.Footer = WireInstructions.Footer\n\nexport function ConfirmWireDetailsFormContextual() {\n  const { selectedWireInId, companyId, onEvent, modalContainerRef } =\n    useFlow<ConfirmWireDetailsContextInterface>()\n\n  return (\n    <ConfirmWireDetailsForm\n      wireInId={ensureRequired(selectedWireInId)}\n      companyId={ensureRequired(companyId)}\n      onEvent={onEvent}\n      modalContainerRef={modalContainerRef}\n    />\n  )\n}\n\nConfirmWireDetailsFormContextual.Footer = ConfirmWireDetailsForm.Footer\n"],"names":["WireInstructionsContextual","companyId","wireInId","selectedWireInId","onEvent","modalContainerRef","useFlow","jsx","WireInstructions","ensureRequired","ConfirmWireDetailsFormContextual","ConfirmWireDetailsForm"],"mappings":";;;;;AA0BO,SAASA,IAA6B;AAC3C,QAAM,EAAE,WAAAC,GAAW,UAAAC,GAAU,kBAAAC,GAAkB,SAAAC,GAAS,mBAAAC,EAAA,IACtDC,EAAA;AAEF,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAeR,CAAS;AAAA,MACnC,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,SAAAC;AAAA,MACA,mBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAL,EAA2B,SAASQ,EAAiB;AAE9C,SAASE,IAAmC;AACjD,QAAM,EAAE,kBAAAP,GAAkB,WAAAF,GAAW,SAAAG,GAAS,mBAAAC,EAAA,IAC5CC,EAAA;AAEF,SACE,gBAAAC;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,UAAUF,EAAeN,CAAgB;AAAA,MACzC,WAAWM,EAAeR,CAAS;AAAA,MACnC,SAAAG;AAAA,MACA,mBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAK,EAAiC,SAASC,EAAuB;"}

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

@@ -1,10 +1,33 @@
+import { default as z } from 'zod';
 import { BaseComponentInterface } from '../../../Base';
 import { EventType } from '../../../../shared/constants';
 import { OnEventType } from '../../../Base/useBase';
 interface ConfirmWireDetailsFormProps extends BaseComponentInterface<'Payroll.ConfirmWireDetailsForm'> {
+    wireInId: string;
     companyId: string;
-    wireInId?: string;
-    onEvent: OnEventType<EventType, unknown>;
+    modalContainerRef?: React.RefObject<HTMLDivElement | null>;
 }
+export declare const ConfirmWireDetailsFormSchema: z.ZodObject<{
+    amountSent: z.ZodNumber;
+    dateSent: z.ZodDate;
+    bankName: z.ZodString;
+    additionalNotes: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    bankName: string;
+    amountSent: number;
+    dateSent: Date;
+    additionalNotes?: string | undefined;
+}, {
+    bankName: string;
+    amountSent: number;
+    dateSent: Date;
+    additionalNotes?: string | undefined;
+}>;
+export type ConfirmWireDetailsFormValues = z.infer<typeof ConfirmWireDetailsFormSchema>;
 export declare function ConfirmWireDetailsForm(props: ConfirmWireDetailsFormProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ConfirmWireDetailsForm {
+    var Footer: ({ onEvent }: {
+        onEvent: OnEventType<EventType, unknown>;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
 export {};

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

@@ -1,30 +1,159 @@
-import { jsx as r, jsxs as e } from "react/jsx-runtime";
-import { useTranslation as f } from "react-i18next";
-import { BaseComponent as d } from "../../../Base/Base.js";
-import "../../../Base/useBase.js";
-import { useComponentContext as C } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useComponentDictionary as p, useI18n as u } from "../../../../i18n/I18n.js";
-import { Flex as l } from "../../../Common/Flex/Flex.js";
-import { payrollWireEvents as m } from "../../../../shared/constants.js";
-function O(o) {
-  return /* @__PURE__ */ r(d, { ...o, children: /* @__PURE__ */ r(h, { ...o, children: o.children }) });
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { useTranslation as F, Trans as A } from "react-i18next";
+import r from "zod";
+import { useForm as _, FormProvider as O } from "react-hook-form";
+import { zodResolver as T } from "@hookform/resolvers/zod";
+import { useIsMutating as E } from "@tanstack/react-query";
+import { useWireInRequestsSubmitMutation as j, mutationKeyWireInRequestsSubmit as B } from "@gusto/embedded-api/react-query/wireInRequestsSubmit";
+import { useWireInRequestsGetSuspense as U } from "@gusto/embedded-api/react-query/wireInRequestsGet";
+import { usePayrollsListSuspense as G } from "@gusto/embedded-api/react-query/payrollsList";
+import d from "./ConfirmWireDetailsForm.module.scss.js";
+import { Form as H } from "../../../Common/Form/Form.js";
+import { BaseComponent as K } from "../../../Base/Base.js";
+import { useBase as Y } from "../../../Base/useBase.js";
+import { useComponentContext as S } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useComponentDictionary as z, useI18n as g } from "../../../../i18n/I18n.js";
+import { Flex as p, FlexItem as f } from "../../../Common/Flex/Flex.js";
+import { payrollWireEvents as N } from "../../../../shared/constants.js";
+import "classnames";
+import "react";
+import { TextAreaField as V } from "../../../Common/Fields/TextAreaField/TextAreaField.js";
+import { useDateFormatter as J } from "../../../../hooks/useDateFormatter.js";
+import { NumberInputField as Q } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
+import { TextInputField as X } from "../../../Common/Fields/TextInputField/TextInputField.js";
+import { DatePickerField as Z } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
+const $ = r.object({
+  amountSent: r.number().positive(),
+  dateSent: r.date(),
+  bankName: r.string().nonempty(),
+  additionalNotes: r.string().optional()
+}), C = "confirm-wire-details-form", ee = (o) => ({
+  amountSent: String(o.amountSent),
+  dateSent: o.dateSent.toISOString().split("T")[0] || "",
+  bankName: o.bankName,
+  additionalNotes: o.additionalNotes || void 0
+});
+function te(o) {
+  return /* @__PURE__ */ e(K, { ...o, children: /* @__PURE__ */ e(oe, { ...o, children: o.children }) });
 }
-const h = ({ companyId: o, wireInId: y, dictionary: a, onEvent: i }) => {
-  p("Payroll.ConfirmWireDetailsForm", a), u("Payroll.ConfirmWireDetailsForm");
-  const { t: n } = f("Payroll.ConfirmWireDetailsForm"), { Button: t } = C(), c = () => {
-    i(m.PAYROLL_WIRE_FORM_DONE);
-  }, s = () => {
-    i(m.PAYROLL_WIRE_FORM_CANCEL);
+const oe = ({
+  wireInId: o,
+  companyId: n,
+  dictionary: i,
+  modalContainerRef: y
+}) => {
+  z("Payroll.ConfirmWireDetailsForm", i), g("Payroll.ConfirmWireDetailsForm");
+  const { onEvent: a, baseSubmitHandler: I } = Y(), { t } = F("Payroll.ConfirmWireDetailsForm"), { Heading: v, Text: b } = S(), R = J(), { data: P } = U({
+    wireInRequestUuid: o
+  }), W = P.wireInRequest, { data: q } = G({
+    companyId: n,
+    processed: !0
+  }), l = q.payrollList?.find(
+    (u) => u.payrollUuid === W?.paymentUuid
+  ), s = l?.payPeriod, c = s?.startDate && s.endDate ? R.formatPayPeriodRange(s.startDate, s.endDate) : void 0, h = l ? R.formatShortWithYear(l.checkDate) : void 0, D = _({
+    resolver: T($),
+    defaultValues: {
+      bankName: ""
+    }
+  }), { mutateAsync: k } = j(), x = async (u) => {
+    await I(u, async (L) => {
+      const w = ee(L), M = await k({
+        request: {
+          wireInRequestUuid: o,
+          requestBody: w
+        }
+      });
+      a(N.PAYROLL_WIRE_FORM_DONE, {
+        wireInRequest: M.wireInRequest,
+        confirmationAlert: {
+          title: c ? t("confirmationAlert.title", { payrollRange: c }) : t("confirmationAlert.emptyTitle"),
+          content: h ? /* @__PURE__ */ e(b, { children: t("confirmationAlert.content", { checkDate: h }) }) : void 0
+        }
+      });
+    });
   };
-  return /* @__PURE__ */ e(l, { flexDirection: "column", gap: 24, children: [
-    /* @__PURE__ */ r("h2", { children: n("title") }),
-    /* @__PURE__ */ e(l, { gap: 12, justifyContent: "flex-end", children: [
-      /* @__PURE__ */ r(t, { variant: "secondary", onClick: s, children: n("cta.cancel") }),
-      /* @__PURE__ */ r(t, { variant: "primary", onClick: c, children: n("cta.submit") })
-    ] })
+  return /* @__PURE__ */ m(p, { flexDirection: "column", gap: 24, children: [
+    /* @__PURE__ */ m(f, { children: [
+      /* @__PURE__ */ e(v, { as: "h2", children: /* @__PURE__ */ e(A, { i18nKey: "title", t, values: { payrollRange: c } }) }),
+      /* @__PURE__ */ e(b, { children: t("description") })
+    ] }),
+    /* @__PURE__ */ e(O, { ...D, children: /* @__PURE__ */ e(
+      H,
+      {
+        id: C,
+        onSubmit: D.handleSubmit(x),
+        className: d.form,
+        children: /* @__PURE__ */ m(p, { flexDirection: "column", gap: 20, children: [
+          /* @__PURE__ */ e(
+            Q,
+            {
+              name: "amountSent",
+              label: t("amountLabel"),
+              isRequired: !0,
+              format: "currency",
+              errorMessage: t("validations.amount")
+            }
+          ),
+          /* @__PURE__ */ e(
+            Z,
+            {
+              name: "dateSent",
+              label: t("dateLabel"),
+              isRequired: !0,
+              errorMessage: t("validations.date"),
+              portalContainer: y?.current || void 0
+            }
+          ),
+          /* @__PURE__ */ e(
+            X,
+            {
+              name: "bankName",
+              label: t("bankNameLabel"),
+              isRequired: !0,
+              description: t("bankNameDescription"),
+              placeholder: t("bankNamePlaceholder"),
+              errorMessage: t("validations.bankName")
+            }
+          ),
+          /* @__PURE__ */ e(V, { name: "additionalNotes", label: t("notesLabel"), rows: 3 })
+        ] })
+      }
+    ) })
+  ] });
+}, re = ({ onEvent: o }) => {
+  g("Payroll.ConfirmWireDetailsForm");
+  const { t: n } = F("Payroll.ConfirmWireDetailsForm"), { Button: i } = S(), a = E({
+    mutationKey: B()
+  }) > 0;
+  return /* @__PURE__ */ m(p, { gap: 12, justifyContent: "space-evenly", children: [
+    /* @__PURE__ */ e(f, { flexGrow: 1, children: /* @__PURE__ */ e(
+      i,
+      {
+        variant: "secondary",
+        onClick: () => {
+          o(N.PAYROLL_WIRE_FORM_CANCEL);
+        },
+        isDisabled: a,
+        className: d.button,
+        children: n("cancelCta")
+      }
+    ) }),
+    /* @__PURE__ */ e(f, { flexGrow: 1, children: /* @__PURE__ */ e(
+      i,
+      {
+        variant: "primary",
+        type: "submit",
+        form: C,
+        isLoading: a,
+        className: d.button,
+        children: n("submitCta")
+      }
+    ) })
   ] });
 };
+te.Footer = re;
 export {
-  O as ConfirmWireDetailsForm
+  te as ConfirmWireDetailsForm,
+  $ as ConfirmWireDetailsFormSchema
 };
 //# sourceMappingURL=ConfirmWireDetailsForm.js.map