@zeniai/web-components 3.16.92 → 3.16.93

package/dist/BankAccountSection-D3sQOQ-c.js

@@ -0,0 +1,398 @@
+import { j as a, d as D, m as W, aK as V } from "./vendor-.pnpm-B2klaOGU.js";
+import { useEffect as q } from "react";
+import h from "@emotion/styled";
+import { A as E, S as b, o as F, u as P, e as S, aB as A, R as i, D as t, aD as L, a as H, aS as x, fj as y, at as z, aX as R } from "./index-l08vvOmt.js";
+const B = h.div`
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  justify-content: flex-end;
+  display: flex;
+  padding: 0 ${b.sp3};
+  pointer-events: initial;
+  min-height: 100%;
+`, I = h(F)`
+  color: ${(e) => e.theme.colors.grey1};
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  user-select: none;
+  margin-right: ${b.sp2};
+`, G = (e) => {
+  const { placeholder: l, loaderSize: o = "Small", style: r } = e;
+  return /* @__PURE__ */ a.jsxs(B, { style: r, children: [
+    l != null ? /* @__PURE__ */ a.jsxs(I, { children: [
+      l,
+      " "
+    ] }) : null,
+    /* @__PURE__ */ a.jsx(
+      E,
+      {
+        size: o,
+        start: !0,
+        style: { display: "flex" }
+      }
+    )
+  ] });
+}, d = {
+  width: new i(343, 580, 726),
+  height: new i(t[6], t[6]),
+  controlHeight: new i(t[6], t[6]),
+  paddingTopBottom: new i(t[2], t[2]),
+  marginTop: new i(t[2], t[2]),
+  marginBottom: new i(t[2], t[2]),
+  marginRight: new i(t[2], t[2]),
+  labelMarginLeft: new i(t[3], t[4]),
+  labelMarginRight: new i(t[3], t[4]),
+  labelMarginTop: new i(t[2], t[2])
+};
+function O({
+  isDisabled: e,
+  label: l,
+  loader: o,
+  style: r
+}) {
+  const m = P();
+  return /* @__PURE__ */ a.jsxs(
+    K,
+    {
+      size: m,
+      isDisabled: e != null,
+      style: r,
+      "data-testid": S("labeled-item-with-loader", l.label),
+      children: [
+        /* @__PURE__ */ a.jsx(
+          A,
+          {
+            isDisabled: e,
+            label: l.label,
+            style: {
+              marginLeft: d.labelMarginLeft.value(m),
+              marginRight: d.labelMarginRight.value(m),
+              marginTop: d.labelMarginTop.value(m),
+              width: l.width ?? "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ a.jsx(
+          G,
+          {
+            ...o,
+            style: {
+              minHeight: d.controlHeight.value(m),
+              display: "flex",
+              flexGrow: 1,
+              ...o.style
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+const K = h.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => d.width.valuePx(e.size)};
+  min-height: ${(e) => d.height.valuePx(e.size)};
+  padding-right: ${(e) => d.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => d.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => d.paddingTopBottom.valuePx(e.size)};
+  opacity: ${(e) => e.isDisabled ? 0.32 : 1};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`, u = {
+  largeLabelWidth: new i(120, 140, 220),
+  paddingTopBottom: new i(t[2], t[2]),
+  labelHeight: new i(t[6], t[6]),
+  labelMarginLeft: new i(t[3], t[4]),
+  labelMarginRight: new i(t[3], t[4]),
+  labelMarginTop: new i(t[2], t[2]),
+  controlHeight: new i(t[6], t[6])
+}, ee = ({
+  sectionId: e,
+  bankAccountToCreate: l,
+  isDisabled: o,
+  fetchBankNameByRoutingStatus: r,
+  style: m
+}) => {
+  const g = P(), {
+    getValues: M,
+    setValue: N,
+    formState: { errors: T }
+  } = D(), $ = L(
+    r.fetchState
+  ), v = L(l?.bankRoutingNumber), j = W(T, s(e, "bankName"));
+  q(() => {
+    ($ === "In-Progress" || v != null && v !== l?.bankRoutingNumber) && r.fetchState === "Completed" && l?.bankName != null && N(
+      s(e, "bankName"),
+      l?.bankName,
+      { shouldValidate: j }
+    );
+  }, [
+    $,
+    v,
+    j,
+    r.fetchState,
+    e,
+    l?.bankName,
+    l?.bankRoutingNumber,
+    N
+  ]);
+  const k = r.fetchState === "Completed" || r.fetchState === "Error" ? o : "disabled", w = H.getLocalizedStrings().spendManagement.billPay.vendorCreation, { achDetails: n } = w, c = u.largeLabelWidth.value(g);
+  return /* @__PURE__ */ a.jsx(
+    X,
+    {
+      style: m,
+      "data-testid": S("bank-account-section", e),
+      children: /* @__PURE__ */ a.jsxs(_, { children: [
+        /* @__PURE__ */ a.jsx(
+          x,
+          {
+            label: {
+              label: n.bankRoutingNumber,
+              width: c
+            },
+            text: {
+              type: "text",
+              name: s(e, "bankRoutingNumber"),
+              placeholder: y(
+                n.bankRoutingNumber
+              ),
+              defaultValue: l?.bankRoutingNumber,
+              options: {
+                required: !0,
+                pattern: /^\d{9}$/
+              }
+            },
+            isDisabled: o,
+            style: { width: "auto" },
+            showAdditionalInfoLabel: !1,
+            additionalInfoLabel: n.invalidRoutingNumber
+          }
+        ),
+        /* @__PURE__ */ a.jsx(f, {}),
+        r.fetchState === "In-Progress" ? /* @__PURE__ */ a.jsx(
+          O,
+          {
+            label: {
+              label: n.bankName,
+              width: c
+            },
+            loader: {
+              placeholder: n.fetchingBankName
+            },
+            style: {
+              width: "auto"
+            }
+          }
+        ) : /* @__PURE__ */ a.jsx(
+          x,
+          {
+            label: {
+              label: n.bankName,
+              width: c
+            },
+            text: {
+              type: "text",
+              name: s(e, "bankName"),
+              placeholder: y(n.bankName),
+              defaultValue: l?.bankName,
+              options: {
+                required: !0
+              }
+            },
+            isDisabled: k,
+            style: {
+              width: "auto",
+              opacity: k === "disabled" ? 0.32 : 1
+            },
+            showAdditionalInfoLabel: !1,
+            additionalInfoLabel: n.invalidBankName
+          }
+        ),
+        /* @__PURE__ */ a.jsx(f, {}),
+        /* @__PURE__ */ a.jsxs(C, { size: g, children: [
+          /* @__PURE__ */ a.jsx(
+            A,
+            {
+              label: w.achDetails.accountTypeLabel,
+              htmlFor: s(e, "bankAccountType"),
+              style: {
+                marginLeft: u.labelMarginLeft.value(g),
+                marginRight: u.labelMarginRight.value(g),
+                width: c
+              }
+            }
+          ),
+          /* @__PURE__ */ a.jsxs(J, { labelWidth: c, size: g, children: [
+            /* @__PURE__ */ a.jsx(
+              z,
+              {
+                label: {
+                  label: w.achDetails.checkingAccountTypeLabel
+                },
+                style: { paddingRight: `${b.sp4}`, width: "auto" },
+                radioField: {
+                  name: s(e, "bankAccountType"),
+                  id: "checking",
+                  value: "checking",
+                  registerOptions: {
+                    required: !0
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ a.jsx(
+              z,
+              {
+                label: {
+                  label: w.achDetails.savingsAccountTypeLabel
+                },
+                style: { width: "auto" },
+                radioField: {
+                  name: s(e, "bankAccountType"),
+                  id: "savings",
+                  value: "savings",
+                  registerOptions: {
+                    required: !0
+                  }
+                }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ a.jsx(f, {}),
+        /* @__PURE__ */ a.jsx(
+          x,
+          {
+            label: {
+              label: n.bankAccountNumber,
+              width: c
+            },
+            text: {
+              type: "text",
+              name: s(e, "bankAccountNumber"),
+              placeholder: y(
+                n.bankAccountNumber
+              ),
+              defaultValue: l?.bankAccountNumber,
+              options: {
+                required: !0,
+                validate: (p) => p != null ? V.accountNumber(p).isValid : !0,
+                pattern: R
+              }
+            },
+            isDisabled: o,
+            style: { width: "auto" },
+            showAdditionalInfoLabel: !1,
+            additionalInfoLabel: n.invalidAccountNumber
+          }
+        ),
+        /* @__PURE__ */ a.jsx(f, {}),
+        /* @__PURE__ */ a.jsx(
+          x,
+          {
+            label: {
+              label: n.confirmedBankAccountNumber,
+              width: c
+            },
+            text: {
+              type: "text",
+              name: s(e, "confirmedBankAccountNumber"),
+              placeholder: n.confirmedBankAccountNumberPlaceholder,
+              defaultValue: l?.confirmedBankAccountNumber,
+              options: {
+                required: !0,
+                pattern: R,
+                validate: (p) => p != null ? M(`${e}.bankAccountNumber`) === p : !1
+              }
+            },
+            disableCopyPaste: !0,
+            isDisabled: o,
+            style: { width: "auto" },
+            showAdditionalInfoLabel: !1,
+            additionalInfoLabel: n.accountNumberDontMatch
+          }
+        ),
+        /* @__PURE__ */ a.jsx(f, {}),
+        /* @__PURE__ */ a.jsx(
+          x,
+          {
+            label: {
+              label: n.accountNickName,
+              width: c
+            },
+            text: {
+              type: "text",
+              name: s(e, "bankAccountName"),
+              placeholder: y(
+                n.accountNickName
+              ),
+              defaultValue: l?.bankAccountName,
+              options: {
+                required: !1
+              }
+            },
+            isDisabled: o,
+            style: { width: "auto" }
+          }
+        )
+      ] })
+    }
+  );
+}, s = (e, l) => `${e}.${l}`, X = h.div`
+  display: flex;
+  flex-direction: column;
+`, _ = h.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${b.sp0} 2px ${b.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${b.sp2};
+`, f = h.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, C = h.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  min-height: ${(e) => u.labelHeight.valuePx(e.size)};
+  padding-right: ${(e) => u.labelMarginRight.valuePx(e.size)};
+  padding-top: ${(e) => u.labelMarginTop.valuePx(e.size)};
+  padding-bottom: ${(e) => u.paddingTopBottom.valuePx(e.size)};
+  align-items: center;
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+  }
+`, J = h.div`
+  display: flex;
+  flex-direction: row;
+  width: ${(e) => `calc(100% - ${e.labelWidth}px)`};
+  align-items: flex-end;
+  justify-content: flex-end;
+  flex-grow: 1;
+  height: ${(e) => u.controlHeight.valuePx(e.size)};
+  align-items: center;
+`;
+export {
+  ee as B
+};

package/dist/BankAccountWarningSection-BdrglxXk.cjs

@@ -0,0 +1,51 @@
+"use strict";const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),t=require("@emotion/styled"),e=require("./index-CwWJYVG_.cjs"),{common:{navBar:{back:m}}}=e.appLocale.getLocalizedStrings(),s={navBarContainerPadding:new e.ResponsiveSized(10,e.sp[3]),formTitleMarginTop:new e.ResponsiveSized(e.sp[0],e.sp[3]),formTitleMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[0]),customTitleMarginBottom:new e.ResponsiveSized(e.sp[0],e.sp[3]),customTitleMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[6]),customTitleMarginRight:new e.ResponsiveSized(e.sp[5],e.sp[8])},x={formTitle:new e.ResponsiveSizedStyle("h6Medium","h5Medium")},u=({header:n,isDirty:r,isMagicLink:l,onBackClick:c,setShowConfirmationPopup:p})=>{const i=e.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[i==="small"?o.jsxRuntimeExports.jsxs($,{windowSize:i,children:[l?null:o.jsxRuntimeExports.jsx(g,{onClick:()=>r?p?.(!0):c?.(),"data-testid":e.generateDataTestId("bank-account-page-back-click-mobile")}),o.jsxRuntimeExports.jsx(d,{windowSize:i,children:n})]}):o.jsxRuntimeExports.jsx(S,{children:l?null:o.jsxRuntimeExports.jsx(e.Tooltip,{title:m,enterDelay:600,placement:"bottom",children:o.jsxRuntimeExports.jsx(g,{onClick:()=>r?p?.(!0):c?.(),"data-testid":e.generateDataTestId("bank-account-page-back-click")})})}),i!=="small"?o.jsxRuntimeExports.jsx(d,{windowSize:i,children:n}):null]})},d=t(e.StyledText)`
+  ${n=>`${x.formTitle.style(n.windowSize)}`};
+  color: ${n=>n.theme.colors.primary};
+  margin-bottom: ${n=>s.customTitleMarginBottom.valuePx(n.windowSize)};
+  margin-top: ${e.Space.sp3};
+  margin-left: ${n=>s.customTitleMarginLeft.valuePx(n.windowSize)};
+  margin-right: ${n=>s.customTitleMarginRight.valuePx(n.windowSize)};
+`,g=t(e.SvgArrowLeft)`
+  cursor: pointer;
+  color: ${n=>n.theme.colors.hero};
+  width: 20px;
+  height: 20px;
+  &:hover {
+    color: ${n=>n.theme.colors.primary};
+  }
+`,S=t.div`
+  margin: ${e.Space.sp3} ${e.Space.sp8} ${e.Space.sp3} ${e.Space.sp6};
+`,$=t.div`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: ${e.Space.sp0};
+  padding-top: ${n=>s.navBarContainerPadding.valuePx(n.windowSize)};
+  padding-bottom: ${n=>s.navBarContainerPadding.valuePx(n.windowSize)};
+  padding-right: ${e.Space.sp5};
+  padding-left: ${e.Space.sp0};
+  z-index: 2;
+  background-color: ${n=>n.theme.colors.grey4};
+`,a={marginBottom:new e.ResponsiveSized(e.sp[5],e.sp[3]),marginRight:new e.ResponsiveSized(e.sp[3],e.sp[8]),marginLeft:new e.ResponsiveSized(e.sp[3],e.sp[6])},v=({warningText:n})=>{const r=e.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(h,{size:r,children:[o.jsxRuntimeExports.jsx(R,{children:o.jsxRuntimeExports.jsx(z,{})}),o.jsxRuntimeExports.jsx(w,{children:n})]})},h=t.div`
+  display: flex;
+  background-color: ${e.Colors.alertLight};
+  border: 1px solid ${e.Colors.brandColorGoldDark};
+  border-radius: ${e.Space.sp2};
+  color: ${e.Colors.alertDark};
+  margin-bottom: ${n=>a.marginBottom.valuePx(n.size)};
+  padding: ${e.Space.sp3} ${e.Space.sp4} ${e.Space.sp3} ${e.Space.sp4};
+  margin-right: ${n=>a.marginRight.valuePx(n.size)};
+  margin-left: ${n=>a.marginLeft.valuePx(n.size)};
+`,w=t(e.StandardRegular)`
+  display: flex;
+  flex-grow: 1;
+  color: ${e.Colors.brandColorGoldDark};
+`,R=t.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${e.Space.sp2};
+`,z=t(e.SvgHighImportanceFilled)`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  color: ${e.Colors.brandColorGoldDark};
+`;exports.BankAccountPageNavSection=u;exports.BankAccountWarningSection=v;

package/dist/BankAccountWarningSection-CxLBPI_P.js

@@ -0,0 +1,110 @@
+import { j as t } from "./vendor-.pnpm-B2klaOGU.js";
+import i from "@emotion/styled";
+import { u as h, e as u, Z as w, a as f, S as o, R as a, G as v, aw as S, J as b, D as n, C as s, ap as z, o as T } from "./index-l08vvOmt.js";
+const {
+  common: {
+    navBar: { back: k }
+  }
+} = f.getLocalizedStrings(), l = {
+  navBarContainerPadding: new a(10, n[3]),
+  formTitleMarginTop: new a(n[0], n[3]),
+  formTitleMarginLeft: new a(n[3], n[0]),
+  customTitleMarginBottom: new a(n[0], n[3]),
+  customTitleMarginLeft: new a(n[3], n[6]),
+  customTitleMarginRight: new a(n[5], n[8])
+}, B = {
+  formTitle: new S("h6Medium", "h5Medium")
+}, W = ({
+  header: e,
+  isDirty: c,
+  isMagicLink: g,
+  onBackClick: m,
+  setShowConfirmationPopup: p
+}) => {
+  const r = h();
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    r === "small" ? /* @__PURE__ */ t.jsxs(y, { windowSize: r, children: [
+      g ? null : /* @__PURE__ */ t.jsx(
+        $,
+        {
+          onClick: () => c ? p?.(!0) : m?.(),
+          "data-testid": u(
+            "bank-account-page-back-click-mobile"
+          )
+        }
+      ),
+      /* @__PURE__ */ t.jsx(x, { windowSize: r, children: e })
+    ] }) : /* @__PURE__ */ t.jsx(j, { children: g ? null : /* @__PURE__ */ t.jsx(w, { title: k, enterDelay: 600, placement: "bottom", children: /* @__PURE__ */ t.jsx(
+      $,
+      {
+        onClick: () => c ? p?.(!0) : m?.(),
+        "data-testid": u("bank-account-page-back-click")
+      }
+    ) }) }),
+    r !== "small" ? /* @__PURE__ */ t.jsx(x, { windowSize: r, children: e }) : null
+  ] });
+}, x = i(b)`
+  ${(e) => `${B.formTitle.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${(e) => l.customTitleMarginBottom.valuePx(e.windowSize)};
+  margin-top: ${o.sp3};
+  margin-left: ${(e) => l.customTitleMarginLeft.valuePx(e.windowSize)};
+  margin-right: ${(e) => l.customTitleMarginRight.valuePx(e.windowSize)};
+`, $ = i(v)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: 20px;
+  height: 20px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, j = i.div`
+  margin: ${o.sp3} ${o.sp8} ${o.sp3} ${o.sp6};
+`, y = i.div`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: ${o.sp0};
+  padding-top: ${(e) => l.navBarContainerPadding.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => l.navBarContainerPadding.valuePx(e.windowSize)};
+  padding-right: ${o.sp5};
+  padding-left: ${o.sp0};
+  z-index: 2;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, d = {
+  marginBottom: new a(n[5], n[3]),
+  marginRight: new a(n[3], n[8]),
+  marginLeft: new a(n[3], n[6])
+}, A = ({ warningText: e }) => {
+  const c = h();
+  return /* @__PURE__ */ t.jsxs(C, { size: c, children: [
+    /* @__PURE__ */ t.jsx(M, { children: /* @__PURE__ */ t.jsx(R, {}) }),
+    /* @__PURE__ */ t.jsx(P, { children: e })
+  ] });
+}, C = i.div`
+  display: flex;
+  background-color: ${s.alertLight};
+  border: 1px solid ${s.brandColorGoldDark};
+  border-radius: ${o.sp2};
+  color: ${s.alertDark};
+  margin-bottom: ${(e) => d.marginBottom.valuePx(e.size)};
+  padding: ${o.sp3} ${o.sp4} ${o.sp3} ${o.sp4};
+  margin-right: ${(e) => d.marginRight.valuePx(e.size)};
+  margin-left: ${(e) => d.marginLeft.valuePx(e.size)};
+`, P = i(T)`
+  display: flex;
+  flex-grow: 1;
+  color: ${s.brandColorGoldDark};
+`, M = i.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${o.sp2};
+`, R = i(z)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${s.brandColorGoldDark};
+`;
+export {
+  W as B,
+  A as a
+};