@gusto/embedded-react-sdk 0.20.0 → 0.21.0

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

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmWireDetailsForm.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\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 { payrollWireEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\ninterface ConfirmWireDetailsFormProps\n  extends BaseComponentInterface<'Payroll.ConfirmWireDetailsForm'> {\n  companyId: string\n  wireInId?: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function ConfirmWireDetailsForm(props: ConfirmWireDetailsFormProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ companyId, wireInId, dictionary, onEvent }: ConfirmWireDetailsFormProps) => {\n  useComponentDictionary('Payroll.ConfirmWireDetailsForm', dictionary)\n  useI18n('Payroll.ConfirmWireDetailsForm')\n  const { t } = useTranslation('Payroll.ConfirmWireDetailsForm')\n  const { Button } = useComponentContext()\n\n  const handleSubmit = () => {\n    onEvent(payrollWireEvents.PAYROLL_WIRE_FORM_DONE)\n  }\n\n  const handleCancel = () => {\n    onEvent(payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL)\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <h2>{t('title')}</h2>\n\n      {/* TODO: Form fields will be implemented in subsequent ticket */}\n\n      <Flex gap={12} justifyContent=\"flex-end\">\n        <Button variant=\"secondary\" onClick={handleCancel}>\n          {t('cta.cancel')}\n        </Button>\n        <Button variant=\"primary\" onClick={handleSubmit}>\n          {t('cta.submit')}\n        </Button>\n      </Flex>\n    </Flex>\n  )\n}\n"],"names":["ConfirmWireDetailsForm","props","jsx","BaseComponent","Root","companyId","wireInId","dictionary","onEvent","useComponentDictionary","useI18n","t","useTranslation","Button","useComponentContext","handleSubmit","payrollWireEvents","handleCancel","jsxs","Flex"],"mappings":";;;;;;;;AAeO,SAASA,EAAuBC,GAAoC;AACzE,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMG,IAAO,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,YAAAC,GAAY,SAAAC,QAA2C;AAC1F,EAAAC,EAAuB,kCAAkCF,CAAU,GACnEG,EAAQ,gCAAgC;AACxC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,gCAAgC,GACvD,EAAE,QAAAC,EAAA,IAAWC,EAAA,GAEbC,IAAe,MAAM;AACzB,IAAAP,EAAQQ,EAAkB,sBAAsB;AAAA,EAClD,GAEMC,IAAe,MAAM;AACzB,IAAAT,EAAQQ,EAAkB,wBAAwB;AAAA,EACpD;AAEA,SACE,gBAAAE,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAjB,EAAC,MAAA,EAAI,UAAAS,EAAE,OAAO,EAAA,CAAE;AAAA,IAIhB,gBAAAO,EAACC,GAAA,EAAK,KAAK,IAAI,gBAAe,YAC5B,UAAA;AAAA,MAAA,gBAAAjB,EAACW,KAAO,SAAQ,aAAY,SAASI,GAClC,UAAAN,EAAE,YAAY,GACjB;AAAA,MACA,gBAAAT,EAACW,KAAO,SAAQ,WAAU,SAASE,GAChC,UAAAJ,EAAE,YAAY,EAAA,CACjB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"ConfirmWireDetailsForm.js","sources":["../../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport z from 'zod'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useIsMutating } from '@tanstack/react-query'\nimport {\n  useWireInRequestsSubmitMutation,\n  mutationKeyWireInRequestsSubmit,\n} from '@gusto/embedded-api/react-query/wireInRequestsSubmit'\nimport { useWireInRequestsGetSuspense } from '@gusto/embedded-api/react-query/wireInRequestsGet'\nimport type { PutWireInRequestsWireInRequestUuidRequest } from '@gusto/embedded-api/models/operations/putwireinrequestswireinrequestuuid'\nimport { usePayrollsGetSuspense } from '@gusto/embedded-api/react-query/payrollsGet'\nimport styles from './ConfirmWireDetailsForm.module.scss'\nimport { Form as HtmlForm } from '@/components/Common/Form'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { Flex, FlexItem } from '@/components/Common/Flex/Flex'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\nimport { DatePickerField, NumberInputField, TextInputField } from '@/components/Common'\nimport { TextAreaField } from '@/components/Common/Fields/TextAreaField'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\n\ninterface ConfirmWireDetailsFormProps\n  extends BaseComponentInterface<'Payroll.ConfirmWireDetailsForm'> {\n  wireInId: string\n  companyId: string\n  modalContainerRef?: React.RefObject<HTMLDivElement | null>\n}\n\nexport const ConfirmWireDetailsFormSchema = z.object({\n  amountSent: z.number().positive(),\n  dateSent: z.date(),\n  bankName: z.string().nonempty(),\n  additionalNotes: z.string().optional(),\n})\n\nexport type ConfirmWireDetailsFormValues = z.infer<typeof ConfirmWireDetailsFormSchema>\n\nconst CONFIRM_WIRE_FORM_ID = 'confirm-wire-details-form'\n\nconst transformFormDataToPayload = (\n  data: ConfirmWireDetailsFormValues,\n): PutWireInRequestsWireInRequestUuidRequest['requestBody'] => {\n  return {\n    amountSent: String(data.amountSent),\n    dateSent: data.dateSent.toISOString().split('T')[0] || '',\n    bankName: data.bankName,\n    additionalNotes: data.additionalNotes || undefined,\n  }\n}\n\nexport function ConfirmWireDetailsForm(props: ConfirmWireDetailsFormProps) {\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  modalContainerRef,\n}: ConfirmWireDetailsFormProps) => {\n  useComponentDictionary('Payroll.ConfirmWireDetailsForm', dictionary)\n  useI18n('Payroll.ConfirmWireDetailsForm')\n  const { onEvent, baseSubmitHandler } = useBase()\n  const { t } = useTranslation('Payroll.ConfirmWireDetailsForm')\n  const { Heading, Text } = useComponentContext()\n  const dateFormatter = useDateFormatter()\n  const { data } = useWireInRequestsGetSuspense({\n    wireInRequestUuid: wireInId,\n  })\n  const wireInRequest = data.wireInRequest!\n  const { data: payroll } = usePayrollsGetSuspense({\n    companyId: companyId,\n    payrollId: wireInRequest.paymentUuid!,\n  })\n  const payrollData = payroll.payrollShow!\n  const payPeriod = payrollData.payPeriod\n  const payPeriodRange = dateFormatter.formatPayPeriodRange(\n    payPeriod?.startDate,\n    payPeriod?.endDate,\n  )\n  const checkDate = dateFormatter.formatShortWithYear(payrollData.checkDate)\n  const formHandlers = useForm<ConfirmWireDetailsFormValues>({\n    resolver: zodResolver(ConfirmWireDetailsFormSchema),\n    defaultValues: {\n      bankName: '',\n    },\n  })\n\n  const { mutateAsync: submitWireInRequest } = useWireInRequestsSubmitMutation()\n\n  const onSubmit = async (data: ConfirmWireDetailsFormValues) => {\n    await baseSubmitHandler(data, async innerData => {\n      const payload = transformFormDataToPayload(innerData)\n      const response = await submitWireInRequest({\n        request: {\n          wireInRequestUuid: wireInId,\n          requestBody: payload,\n        },\n      })\n      onEvent(payrollWireEvents.PAYROLL_WIRE_FORM_DONE, {\n        wireInRequest: response.wireInRequest,\n        confirmationAlert: {\n          title: t('confirmationAlert.title', { payrollRange: payPeriodRange }),\n          content: <Text>{t('confirmationAlert.content', { checkDate })}</Text>,\n        },\n      })\n    })\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <FlexItem>\n        <Heading as=\"h2\">\n          <Trans i18nKey=\"title\" t={t} values={{ payrollRange: payPeriodRange }} />\n        </Heading>\n        <Text>{t('description')}</Text>\n      </FlexItem>\n\n      <FormProvider {...formHandlers}>\n        <HtmlForm\n          id={CONFIRM_WIRE_FORM_ID}\n          onSubmit={formHandlers.handleSubmit(onSubmit)}\n          className={styles.form}\n        >\n          <Flex flexDirection=\"column\" gap={20}>\n            <NumberInputField\n              name=\"amountSent\"\n              label={t('amountLabel')}\n              isRequired\n              format=\"currency\"\n              errorMessage={t('validations.amount')}\n            />\n            <DatePickerField\n              name=\"dateSent\"\n              label={t('dateLabel')}\n              isRequired\n              errorMessage={t('validations.date')}\n              portalContainer={modalContainerRef?.current || undefined}\n            />\n            <TextInputField\n              name=\"bankName\"\n              label={t('bankNameLabel')}\n              isRequired\n              description={t('bankNameDescription')}\n              placeholder={t('bankNamePlaceholder')}\n              errorMessage={t('validations.bankName')}\n            />\n            <TextAreaField name=\"additionalNotes\" label={t('notesLabel')} rows={3} />\n          </Flex>\n        </HtmlForm>\n      </FormProvider>\n    </Flex>\n  )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n  useI18n('Payroll.ConfirmWireDetailsForm')\n  const { t } = useTranslation('Payroll.ConfirmWireDetailsForm')\n  const { Button } = useComponentContext()\n  const isMutating = useIsMutating({\n    mutationKey: mutationKeyWireInRequestsSubmit(),\n  })\n  const isPending = isMutating > 0\n\n  return (\n    <Flex gap={12} justifyContent=\"space-evenly\">\n      <FlexItem flexGrow={1}>\n        <Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL)\n          }}\n          isDisabled={isPending}\n          className={styles.button}\n        >\n          {t('cancelCta')}\n        </Button>\n      </FlexItem>\n      <FlexItem flexGrow={1}>\n        <Button\n          variant=\"primary\"\n          type=\"submit\"\n          form={CONFIRM_WIRE_FORM_ID}\n          isLoading={isPending}\n          className={styles.button}\n        >\n          {t('submitCta')}\n        </Button>\n      </FlexItem>\n    </Flex>\n  )\n}\nConfirmWireDetailsForm.Footer = Footer\n"],"names":["ConfirmWireDetailsFormSchema","z","CONFIRM_WIRE_FORM_ID","transformFormDataToPayload","data","ConfirmWireDetailsForm","props","jsx","BaseComponent","Root","wireInId","companyId","dictionary","modalContainerRef","useComponentDictionary","useI18n","onEvent","baseSubmitHandler","useBase","t","useTranslation","Heading","Text","useComponentContext","dateFormatter","useDateFormatter","useWireInRequestsGetSuspense","wireInRequest","payroll","usePayrollsGetSuspense","payrollData","payPeriod","payPeriodRange","checkDate","formHandlers","useForm","zodResolver","submitWireInRequest","useWireInRequestsSubmitMutation","onSubmit","innerData","payload","response","payrollWireEvents","jsxs","Flex","FlexItem","Trans","FormProvider","HtmlForm","styles","NumberInputField","DatePickerField","TextInputField","TextAreaField","Footer","Button","isPending","useIsMutating","mutationKeyWireInRequestsSubmit"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+const t = "_form_6gb8x_1", o = "_button_6gb8x_5", n = {
+  form: t,
+  button: o
+};
+export {
+  o as button,
+  n as default,
+  t as form
+};
+//# sourceMappingURL=ConfirmWireDetailsForm.module.scss.js.map

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

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

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

@@ -1,10 +1,18 @@
 import { BaseComponentInterface } from '../../../Base';
-import { EventType } from '../../../../shared/constants';
 import { OnEventType } from '../../../Base/useBase';
+import { EventType } from '../../../../shared/constants';
 interface WireInstructionsProps extends BaseComponentInterface<'Payroll.WireInstructions'> {
     companyId: string;
     wireInId?: string;
+    selectedWireInId?: string;
     onEvent: OnEventType<EventType, unknown>;
+    modalContainerRef?: React.RefObject<HTMLDivElement | null>;
 }
 export declare function WireInstructions(props: WireInstructionsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace WireInstructions {
+    var Footer: ({ onEvent }: {
+        onEvent: OnEventType<EventType, unknown>;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export declare const Root: ({ companyId, wireInId, selectedWireInId, dictionary, onEvent, modalContainerRef, }: WireInstructionsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,30 +1,203 @@
-import { jsx as n, jsxs as e } from "react/jsx-runtime";
-import { useTranslation as d } from "react-i18next";
-import { BaseComponent as u } from "../../../Base/Base.js";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { useMemo as v } from "react";
+import { useTranslation as A } from "react-i18next";
+import { useWireInRequestsListSuspense as T } from "@gusto/embedded-api/react-query/wireInRequestsList";
+import { usePayrollsListSuspense as x } from "@gusto/embedded-api/react-query/payrollsList";
+import u from "./WireInstructions.module.scss.js";
+import { BaseComponent as F } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
-import { useComponentContext as I } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useComponentDictionary as f, useI18n as p } from "../../../../i18n/I18n.js";
-import { Flex as c } from "../../../Common/Flex/Flex.js";
-import { payrollWireEvents as l } from "../../../../shared/constants.js";
-function P(o) {
-  return /* @__PURE__ */ n(u, { ...o, children: /* @__PURE__ */ n(C, { ...o, children: o.children }) });
+import { Flex as f } from "../../../Common/Flex/Flex.js";
+import { useComponentContext as g } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useComponentDictionary as _, useI18n as k } from "../../../../i18n/I18n.js";
+import { payrollWireEvents as C } from "../../../../shared/constants.js";
+import { useDateFormatter as w } from "../../../../hooks/useDateFormatter.js";
+import E from "../../../../hooks/useNumberFormatter.js";
+import { useFlow as O } from "../../../Flow/useFlow.js";
+function W(n, a) {
+  const { data: i } = T({
+    companyUuid: n
+  }), { data: d } = x({
+    companyId: n,
+    processed: !0
+  }), l = (i.wireInRequestList || []).filter(
+    (o) => o.status === "awaiting_funds"
+  ), r = l.find((o) => o.uuid === a), t = d.payrollList || [], m = v(
+    () => l.map((o) => {
+      const h = t.find((b) => b.payrollUuid === o.paymentUuid);
+      return {
+        wireInRequest: o,
+        payroll: h
+      };
+    }),
+    [l, t]
+  );
+  return {
+    selectedInstruction: v(() => r ? {
+      id: r.uuid || "",
+      trackingCode: r.uniqueTrackingCode || "",
+      amount: parseFloat(r.requestedAmount || "0"),
+      bankName: r.originationBank || "",
+      bankAddress: r.originationBankAddress || "",
+      recipientName: r.recipientName || "",
+      recipientAddress: r.recipientAddress || "",
+      recipientAccountNumber: r.recipientAccountNumber || "",
+      recipientRoutingNumber: r.recipientRoutingNumber || ""
+    } : null, [r]),
+    activeWireInRequestsWithPayrolls: m
+  };
+}
+function c({ label: n, value: a }) {
+  const { Text: i } = g();
+  return /* @__PURE__ */ p(f, { flexDirection: "column", gap: 8, children: [
+    /* @__PURE__ */ e(i, { className: u.fieldLabel, children: n }),
+    /* @__PURE__ */ e(i, { className: u.fieldValue, children: a })
+  ] });
 }
-const C = ({ companyId: o, wireInId: h, dictionary: s, onEvent: t }) => {
-  f("Payroll.WireInstructions", s), p("Payroll.WireInstructions");
-  const { t: r } = d("Payroll.WireInstructions"), { Button: i } = I(), m = () => {
-    t(l.PAYROLL_WIRE_INSTRUCTIONS_DONE);
-  }, a = () => {
-    t(l.PAYROLL_WIRE_INSTRUCTIONS_CANCEL);
+function U(n) {
+  return /* @__PURE__ */ e(F, { ...n, children: /* @__PURE__ */ e(B, { ...n, children: n.children }) });
+}
+const B = ({
+  companyId: n,
+  wireInId: a,
+  selectedWireInId: i,
+  dictionary: d,
+  onEvent: l,
+  modalContainerRef: r
+}) => {
+  _("Payroll.WireInstructions", d), k("Payroll.WireInstructions");
+  const { t } = A("Payroll.WireInstructions"), { Select: m, Card: R, Text: o, UnorderedList: h, Heading: b, Alert: L } = g(), P = w(), q = E("currency"), { selectedInstruction: s, activeWireInRequestsWithPayrolls: I } = W(
+    n,
+    i
+  ), S = !a && I.length > 1, D = (N) => {
+    l(C.PAYROLL_WIRE_INSTRUCTIONS_SELECT, {
+      selectedId: N
+    });
+  };
+  return I.length === 0 || i && !s ? /* @__PURE__ */ e(f, { flexDirection: "column", gap: 24, children: /* @__PURE__ */ e(o, { children: t("messages.noInstructions") }) }) : /* @__PURE__ */ p(f, { flexDirection: "column", gap: 24, children: [
+    /* @__PURE__ */ p("div", { children: [
+      /* @__PURE__ */ e(b, { as: "h2", styledAs: "h3", children: t("title") }),
+      /* @__PURE__ */ e(o, { className: u.subtitle, children: t("subtitle") })
+    ] }),
+    S && /* @__PURE__ */ e(
+      m,
+      {
+        isRequired: !0,
+        portalContainer: r?.current || void 0,
+        label: t("selectLabel"),
+        value: i || "",
+        options: I.map(({ wireInRequest: N, payroll: y }) => ({
+          label: y?.payPeriod ? P.formatPayPeriodRange(
+            y.payPeriod.startDate,
+            y.payPeriod.endDate
+          ) : t("selectFallback"),
+          value: N.uuid || ""
+        })),
+        onChange: D
+      }
+    ),
+    /* @__PURE__ */ e(L, { label: t("requirementsTitle"), disableScrollIntoView: !0, children: /* @__PURE__ */ e(
+      h,
+      {
+        className: u.requirementsList,
+        items: [
+          t("requirements.trackingCode"),
+          t("requirements.amountMatch"),
+          t("requirements.usBank"),
+          t("requirements.authorized")
+        ]
+      }
+    ) }),
+    s && /* @__PURE__ */ e(f, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ p(R, { className: u.requirementsCard, children: [
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: t("fields.trackingCode"),
+          value: s.trackingCode
+        }
+      ),
+      /* @__PURE__ */ e("hr", {}),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: t("fields.amount"),
+          value: q(s.amount)
+        }
+      ),
+      /* @__PURE__ */ e("hr", {}),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: t("fields.bankName"),
+          value: s.bankName
+        }
+      ),
+      /* @__PURE__ */ e("hr", {}),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: t("fields.bankAddress"),
+          value: s.bankAddress
+        }
+      ),
+      /* @__PURE__ */ e("hr", {}),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: t("fields.recipientName"),
+          value: s.recipientName
+        }
+      ),
+      /* @__PURE__ */ e("hr", {}),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: t("fields.recipientAddress"),
+          value: s.recipientAddress
+        }
+      ),
+      /* @__PURE__ */ e("hr", {}),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: t("fields.accountNumber"),
+          value: s.recipientAccountNumber
+        }
+      ),
+      /* @__PURE__ */ e("hr", {}),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: t("fields.routingNumber"),
+          value: s.recipientRoutingNumber
+        }
+      )
+    ] }) })
+  ] });
+}, Y = ({ onEvent: n }) => {
+  k("Payroll.WireInstructions");
+  const { t: a } = A("Payroll.WireInstructions"), { Button: i } = g(), { companyId: d, wireInId: l } = O(), { selectedInstruction: r } = W(d, l), t = () => {
+    const m = l || r?.id;
+    n(C.PAYROLL_WIRE_INSTRUCTIONS_DONE, {
+      selectedId: m
+    });
   };
-  return /* @__PURE__ */ e(c, { flexDirection: "column", gap: 24, children: [
-    /* @__PURE__ */ n("h2", { children: r("title") }),
-    /* @__PURE__ */ e(c, { gap: 12, justifyContent: "flex-end", children: [
-      /* @__PURE__ */ n(i, { variant: "secondary", onClick: a, children: r("cta.close") }),
-      /* @__PURE__ */ n(i, { variant: "primary", onClick: m, children: r("cta.confirm") })
-    ] })
+  return /* @__PURE__ */ p("div", { className: u.footer, children: [
+    /* @__PURE__ */ e(
+      i,
+      {
+        variant: "secondary",
+        onClick: () => {
+          n(C.PAYROLL_WIRE_INSTRUCTIONS_CANCEL);
+        },
+        children: a("cta.close")
+      }
+    ),
+    /* @__PURE__ */ e(i, { variant: "primary", onClick: t, isDisabled: !r, children: a("cta.confirm") })
   ] });
 };
+U.Footer = Y;
 export {
-  P as WireInstructions
+  B as Root,
+  U as WireInstructions
 };
 //# sourceMappingURL=WireInstructions.js.map