@zeniai/web-components 3.17.12 → 3.17.13

package/dist/ACHDetailsPage-BMCiAhGz.cjs

@@ -0,0 +1,21 @@
+"use strict";const t=require("./vendor-.pnpm-D0ILHvHB.cjs"),h=require("react"),l=require("@emotion/styled"),n=require("./index-DoK40ULp.cjs"),R=require("./BankAccountWarningSection-CQFFQ8k8.cjs"),q=require("./MagicLinkTitleSection-D4lH9t6-.cjs"),I=require("./BankAccountSection-CQBaBRSi.cjs"),i={paddingTopBottomContainer:new n.ResponsiveSized(n.sp[3],n.sp[3]),paddingLeftContainer:new n.ResponsiveSized(n.sp[3],n.sp[6]),paddingRightContainer:new n.ResponsiveSized(n.sp[3],n.sp[8]),sectionTitleMarginLeft:new n.ResponsiveSized(n.sp[4],n.sp[6]),sectionTitleMarginTop:new n.ResponsiveSized(12,n.sp[3]),buttonWidth:new n.ResponsiveSized(140,140)},v="achDetailsPage",m="bankAccountSection",P=e=>`${e}_form`,M=({bankAccountCreationState:e,bankAccountToCreate:x,fetchBankNameByRoutingStatus:S,isDisabled:b,style:C,onSaveHandler:w,onBackClick:g,onACHDetailsUpdated:z,onFetchBankName:E,isMagicLink:u,companyName:y,currencySymbol:D,amount:N,bankAccountContext:A})=>{const r=n.useWindowSizeContext(),o=t.useForm({mode:"onBlur",reValidateMode:"onChange",defaultValues:h.useMemo(()=>W(x),[x])}),[B,d]=h.useState(!1),a=n.appLocale.getLocalizedStrings().spendManagement.billPay.vendorCreation,T=n.appLocale.getLocalizedStrings().common.footer,{achDetails:j,bankAccountCommon:f}=a,k={onOkClick:()=>{d(!1),o.reset(),g?.()},onCancelClick:()=>{d(!1)}},$=async(p,c)=>{const s=c[m].bankRoutingNumber;z(c),p===`${m}.bankRoutingNumber`&&s?.length===9&&n.DIGITS_PATTERN.test(s)===!0&&E?.(s)};h.useEffect(()=>{const p=o.watch((c,{name:s})=>{s!=null&&c!=null&&t.defer(()=>$(s,c))});return()=>{p.unsubscribe()}});const L=o.handleSubmit(p=>{S.fetchState!=="In-Progress"&&w("ach")});return t.jsxRuntimeExports.jsxs(_,{children:[t.jsxRuntimeExports.jsxs(F,{style:C,size:r,children:[B===!0?t.jsxRuntimeExports.jsx(n.ConfirmationPopup,{titleComponent:t.jsxRuntimeExports.jsx(n.ConfirmationPopUpTitle,{children:a.discardTitle}),descriptionComponent:t.jsxRuntimeExports.jsx(n.ConfirmationPopUpDescription,{children:a.discardDescription}),primaryButtonText:a.discard,secondaryButtonText:a.cancel,action:k}):null,t.jsxRuntimeExports.jsx(R.BankAccountPageNavSection,{header:u?t.jsxRuntimeExports.jsx(q.MagicLinkTitleSection,{companyName:y??"",currencySymbol:D??"",amount:N??0}):j.addACHDetails,isMagicLink:u,isDirty:o.formState.isDirty,onBackClick:g,setShowConfirmationPopup:d}),e?.fetchState==="Error"&&e.error?.code===409?t.jsxRuntimeExports.jsx(R.BankAccountWarningSection,{warningText:f.accountExistWarning}):null,A==="express-pay"?null:t.jsxRuntimeExports.jsx(V,{size:r,children:j.title}),t.jsxRuntimeExports.jsx(O,{children:t.jsxRuntimeExports.jsx(t.FormProvider,{...o,children:t.jsxRuntimeExports.jsx("form",{id:P(v),onSubmit:L,children:t.jsxRuntimeExports.jsx(H,{size:r,children:t.jsxRuntimeExports.jsx(I.BankAccountSection,{bankAccountToCreate:x,fetchBankNameByRoutingStatus:S,sectionId:m,isDisabled:b})})})})})]}),t.jsxRuntimeExports.jsx(n.Footer,{formId:P(v),primaryBtn:{label:u?f.submitDetails:f.saveAccount,isLoading:e.fetchState==="In-Progress",style:{width:i.buttonWidth.value(r)},isDisabled:b!=null},showCancel:!u,cancelBtn:{label:T.cancel,style:{width:i.buttonWidth.value(r)},shouldResetOnCancel:!1,onClick:()=>{o.formState.isDirty?d(!0):(o.reset(),g?.())}}})]})},W=e=>({[m]:{bankRoutingNumber:e?.bankRoutingNumber,bankName:e?.bankName,bankAccountNumber:e?.bankAccountNumber,confirmedBankAccountNumber:e?.confirmedBankAccountNumber,bankAccountName:e?.bankAccountName,bankAccountType:e?.bankAccountType}}),H=l.div`
+  padding-left: ${e=>i.paddingLeftContainer.valuePx(e.size)};
+  padding-right: ${e=>i.paddingRightContainer.valuePx(e.size)};
+  padding-top: ${e=>i.paddingTopBottomContainer.valuePx(e.size)};
+  padding-bottom: ${e=>i.paddingTopBottomContainer.valuePx(e.size)};
+`,_=l.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`,F=l.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`,V=l(n.LargeSemiBold)`
+  color: ${e=>e.theme.colors.champion};
+  margin-left: ${e=>i.sectionTitleMarginLeft.valuePx(e.size)};
+  margin-top: ${e=>i.sectionTitleMarginTop.valuePx(e.size)};
+`,O=l.div`
+  margin-top: ${n.Space.sp5};
+`;exports.ACHDetailsPage=M;

package/dist/ACHDetailsPage-CByi57Q5.js

@@ -0,0 +1,160 @@
+import { g as M, h as W, j as n, F as E } from "./vendor-.pnpm-B2klaOGU.js";
+import { useMemo as F, useState as H, useEffect as V } from "react";
+import d from "@emotion/styled";
+import { u as _, a as C, aP as O, aQ as U, aR as q, ao as G, R as s, aX as Q, k as X, S as J, D as t } from "./index-BveTtfdM.js";
+import { B as K, a as Y } from "./BankAccountWarningSection-DZnSYf5d.js";
+import { M as Z } from "./MagicLinkTitleSection-DM9zVrNg.js";
+import { B as ee } from "./BankAccountSection-jDObGbZV.js";
+const o = {
+  paddingTopBottomContainer: new s(t[3], t[3]),
+  paddingLeftContainer: new s(t[3], t[6]),
+  paddingRightContainer: new s(t[3], t[8]),
+  sectionTitleMarginLeft: new s(t[4], t[6]),
+  sectionTitleMarginTop: new s(12, t[3]),
+  buttonWidth: new s(140, 140)
+}, w = "achDetailsPage", f = "bankAccountSection", y = (e) => `${e}_form`, fe = ({
+  bankAccountCreationState: e,
+  bankAccountToCreate: g,
+  fetchBankNameByRoutingStatus: b,
+  isDisabled: S,
+  style: j,
+  onSaveHandler: v,
+  onBackClick: h,
+  onACHDetailsUpdated: D,
+  onFetchBankName: N,
+  isMagicLink: u,
+  companyName: B,
+  currencySymbol: z,
+  amount: T,
+  bankAccountContext: A
+}) => {
+  const r = _(), i = M({
+    mode: "onBlur",
+    reValidateMode: "onChange",
+    defaultValues: F(
+      () => ne(g),
+      [g]
+    )
+  }), [R, m] = H(!1), c = C.getLocalizedStrings().spendManagement.billPay.vendorCreation, k = C.getLocalizedStrings().common.footer, { achDetails: P, bankAccountCommon: x } = c, $ = {
+    onOkClick: () => {
+      m(!1), i.reset(), h?.();
+    },
+    onCancelClick: () => {
+      m(!1);
+    }
+  }, I = async (p, l) => {
+    const a = l[f].bankRoutingNumber;
+    D(l), p === `${f}.bankRoutingNumber` && a?.length === 9 && Q.test(a) === !0 && N?.(a);
+  };
+  V(() => {
+    const p = i.watch((l, { name: a }) => {
+      a != null && l != null && W(() => I(a, l));
+    });
+    return () => {
+      p.unsubscribe();
+    };
+  });
+  const L = i.handleSubmit((p) => {
+    b.fetchState !== "In-Progress" && v("ach");
+  });
+  return /* @__PURE__ */ n.jsxs(oe, { children: [
+    /* @__PURE__ */ n.jsxs(ie, { style: j, size: r, children: [
+      R === !0 ? /* @__PURE__ */ n.jsx(
+        O,
+        {
+          titleComponent: /* @__PURE__ */ n.jsx(q, { children: c.discardTitle }),
+          descriptionComponent: /* @__PURE__ */ n.jsx(U, { children: c.discardDescription }),
+          primaryButtonText: c.discard,
+          secondaryButtonText: c.cancel,
+          action: $
+        }
+      ) : null,
+      /* @__PURE__ */ n.jsx(
+        K,
+        {
+          header: u ? /* @__PURE__ */ n.jsx(
+            Z,
+            {
+              companyName: B ?? "",
+              currencySymbol: z ?? "",
+              amount: T ?? 0
+            }
+          ) : P.addACHDetails,
+          isMagicLink: u,
+          isDirty: i.formState.isDirty,
+          onBackClick: h,
+          setShowConfirmationPopup: m
+        }
+      ),
+      e?.fetchState === "Error" && e.error?.code === 409 ? /* @__PURE__ */ n.jsx(
+        Y,
+        {
+          warningText: x.accountExistWarning
+        }
+      ) : null,
+      A === "express-pay" ? null : /* @__PURE__ */ n.jsx(ae, { size: r, children: P.title }),
+      /* @__PURE__ */ n.jsx(se, { children: /* @__PURE__ */ n.jsx(E, { ...i, children: /* @__PURE__ */ n.jsx("form", { id: y(w), onSubmit: L, children: /* @__PURE__ */ n.jsx(te, { size: r, children: /* @__PURE__ */ n.jsx(
+        ee,
+        {
+          bankAccountToCreate: g,
+          fetchBankNameByRoutingStatus: b,
+          sectionId: f,
+          isDisabled: S
+        }
+      ) }) }) }) })
+    ] }),
+    /* @__PURE__ */ n.jsx(
+      G,
+      {
+        formId: y(w),
+        primaryBtn: {
+          label: u ? x.submitDetails : x.saveAccount,
+          isLoading: e.fetchState === "In-Progress",
+          style: { width: o.buttonWidth.value(r) },
+          isDisabled: S != null
+        },
+        showCancel: !u,
+        cancelBtn: {
+          label: k.cancel,
+          style: { width: o.buttonWidth.value(r) },
+          shouldResetOnCancel: !1,
+          onClick: () => {
+            i.formState.isDirty ? m(!0) : (i.reset(), h?.());
+          }
+        }
+      }
+    )
+  ] });
+}, ne = (e) => ({
+  [f]: {
+    bankRoutingNumber: e?.bankRoutingNumber,
+    bankName: e?.bankName,
+    bankAccountNumber: e?.bankAccountNumber,
+    confirmedBankAccountNumber: e?.confirmedBankAccountNumber,
+    bankAccountName: e?.bankAccountName,
+    bankAccountType: e?.bankAccountType
+  }
+}), te = d.div`
+  padding-left: ${(e) => o.paddingLeftContainer.valuePx(e.size)};
+  padding-right: ${(e) => o.paddingRightContainer.valuePx(e.size)};
+  padding-top: ${(e) => o.paddingTopBottomContainer.valuePx(e.size)};
+  padding-bottom: ${(e) => o.paddingTopBottomContainer.valuePx(e.size)};
+`, oe = d.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`, ie = d.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`, ae = d(X)`
+  color: ${(e) => e.theme.colors.champion};
+  margin-left: ${(e) => o.sectionTitleMarginLeft.valuePx(e.size)};
+  margin-top: ${(e) => o.sectionTitleMarginTop.valuePx(e.size)};
+`, se = d.div`
+  margin-top: ${J.sp5};
+`;
+export {
+  fe as A
+};