@zeniai/web-components 3.16.55 → 3.16.57

package/dist/BillPaySetUpPage-DNZrExfe.js

@@ -0,0 +1,412 @@
+import { u as _e, g as Fe, h as He, b as Q, j as t, D as $e, F as ze } from "./vendor-.pnpm-Q8NJHkXi.js";
+import { useState as Ue, useRef as Le, useMemo as Ee, useEffect as W } from "react";
+import g from "@emotion/styled";
+import { isVerifiedPaymentAccountProviderStatusCode as Ne } from "@zeniai/client-epic-state";
+import { u as qe, aD as k, a as Me, j as Ge, C as Je, R as u, aE as Ze, A as Ke, gl as Qe, eN as Xe, gf as Ye, Z as et, hE as tt, ap as it, S as E, D as a, p as ot, ag as nt } from "./index-DIy5Kjs9.js";
+import { H as at } from "./HelpButton-BRrb-Lhn.js";
+import "./SetUpAccountSection-DQlw_Rv7.js";
+import { S as U } from "./SetUpDefaultSection-Dxlfkyuh.js";
+import { S as lt } from "./SpendMgmtSetupAccountSection-R7LGfv5I.js";
+import { U as st } from "./UploadAdditionalDocumentOverlay-Bc7EMHqK.js";
+const o = {
+  titleWidth: new u(343, 580, 726, 826),
+  setupDetailsRowGap: new u(12, a[5], a[5]),
+  sectionRowGap: new u(a[5], a[9], a[9]),
+  lastSectionPaddingBottom: new u(a[7], a[10], a[10]),
+  iconWidthHeight: new u(20, a[4]),
+  subTitlePaddingTop: new u(12, a[3]),
+  subTitlePaddingBottom: new u(a[3], a[3]),
+  overlayWidth: new u(100, 100, 59)
+}, X = "billPaySetUpPage", V = "billPayAccount", Tt = ({
+  billPaySetupView: e,
+  isDisabled: P,
+  billpayApprovalView: O,
+  meetingUrl: b,
+  showIntlWiseWidget: c,
+  connectedAccountProvider: ee,
+  isAccountsEnabled: te,
+  isLocalCurrencyEnabled: ie,
+  analytics: m,
+  filesEndPoint: oe,
+  authParams: ne,
+  accountsPromoConfig: ae,
+  onBackClick: le,
+  onBusinessVerificationSectionClick: se,
+  onSetupApprovalRulesSectionClick: ce,
+  onFetchLinkTokenClick: re,
+  onEstablishConnectionClick: de,
+  onEstablishConnectionSuccess: ue,
+  onUpdatePrimaryFundingAccount: pe,
+  onUpdateAccountClick: he,
+  onUpdatePaymentAccountStatus: fe,
+  onUpdatePaymentAccountLoginStatus: ge,
+  onEnableBillPayClick: me,
+  onEnableBillPaySuccess: N,
+  onClickMenuIcon: Se,
+  onInternationPaymentSetUpClick: ve,
+  onEditFileName: xe,
+  onDeleteFile: ye,
+  updateFilesEntity: Pe,
+  onCompanyOfficerUpdated: be,
+  onSendForVerificationClick: we,
+  onSignUpClick: Ae
+}) => {
+  const w = _e(), i = qe(), [A, S] = Ue(!1), q = Le(null), {
+    fetchState: p,
+    updateStatus: v,
+    accountUpdateStatus: Te,
+    plaidConnectionDetails: R,
+    allBankAccounts: Be,
+    companyBillPayInfo: T,
+    isRefreshingViewInBackground: Ce,
+    selectedCompanyOfficer: s,
+    primaryFundingAccount: r,
+    allFundingAccounts: M
+  } = e, h = T?.internationalWireOnboardingStatus, B = h == null || h.code === "onboarding_status_not_started", {
+    fetchState: G,
+    allApprovalRules: C,
+    approvalRulesStatus: je
+  } = O, _ = R.link_account.updateStatus, F = R.update_account.updateStatus, j = k(p), J = k(v.fetchState), Z = k(
+    _.fetchState
+  ), K = k(
+    F.fetchState
+  ), x = Fe({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: Ee(
+      () => L(e),
+      [e]
+    ),
+    values: L(e)
+  });
+  W(() => {
+    !A && s?.additionalDocumentTypesRequestedForVerification.includes(
+      "social_security_card"
+    ) === !0 && s.areAdditionalDocumentsRequestedForVerification && !s.areAdditionalDocumentsSubmittedForVerification && s.userVerificationStatus?.code === "require_info" && S(!0), A && j === "In-Progress" && p === "Completed" && S(!1);
+  }, [s, p, j]), W(() => {
+    (j === "In-Progress" && p === "Completed" || Z === "In-Progress" && _.fetchState === "Completed" || K === "In-Progress" && F.fetchState === "Completed") && x.reset(L(e));
+  }, [
+    j,
+    p,
+    x,
+    e,
+    Z,
+    _.fetchState,
+    K,
+    F.fetchState
+  ]);
+  const Ie = x.handleSubmit((y) => {
+    m.trackEnableBillPay(), me();
+  }), De = async (y, D) => {
+    const n = D[V];
+    if (y.includes(V)) {
+      if (y.includes("fundingAccount")) {
+        if (n.fundingAccount.selectedOption != null && r?.id != n.fundingAccount.selectedOption) {
+          const f = M.find(
+            (z) => z.id === n.fundingAccount.selectedOption
+          );
+          f != null && pe(
+            n.fundingAccount.selectedOption,
+            f.accType
+          );
+        }
+      } else if (n.account.selectedOption != null && r?.id != null && r?.zeniAccountId != n.account.selectedOption) {
+        const f = n.account.allOptions.find(
+          (z) => z.value === n.account.selectedOption
+        );
+        f != null && typeof f.label == "string" && m.trackConnectBankLink(
+          f.value,
+          f.label,
+          "bill_pay"
+        ), he(
+          n.account.selectedOption,
+          r.id,
+          r.accType
+        );
+      }
+    }
+  };
+  W(() => {
+    const y = x.watch((D, { name: n }) => {
+      n != null && D != null && He(() => De(n, D));
+    });
+    return () => {
+      y.unsubscribe();
+    };
+  }), W(() => {
+    J === "In-Progress" && v.fetchState === "Completed" && N();
+  }, [N, J, v.fetchState]);
+  const { commonSetUp: We, spendManagement: ke } = Me.getLocalizedStrings(), { setUp: d } = We, { billPaySetup: l } = ke.billPay, H = T?.isBusinessVerified === !0 && (r?.accType === "depositAccount" || Ne(
+    r?.providerVerificationStatus?.code ?? ""
+  )), $ = T?.isBillPayEnabled === !0, Ve = H ? d.setupVerifiedSubTitle : l.setupSubTitle, Oe = p === "In-Progress" || p === "Not-Started" || G === "In-Progress" || G === "Not-Started", I = w.mode === "light" ? new Q(w.colors.brandColorJadeLight) : new Q(w.colors.brandColorJadeDark), Re = () => {
+    !A && s?.additionalDocumentTypesRequestedForVerification.includes(
+      "social_security_card"
+    ) === !0 && s.areAdditionalDocumentsRequestedForVerification && !s.areAdditionalDocumentsSubmittedForVerification && s.userVerificationStatus?.code === "require_info" ? S(!0) : se?.();
+  };
+  return /* @__PURE__ */ t.jsxs(rt, { ref: q, children: [
+    /* @__PURE__ */ t.jsx(
+      $e,
+      {
+        anchor: "right",
+        PaperProps: {
+          style: {
+            width: o.overlayWidth.valuePercentage(i),
+            boxShadow: "none"
+          }
+        },
+        open: A,
+        onClose: () => S(!1),
+        style: { backgroundColor: Je.drawerBackground },
+        transitionDuration: 250,
+        "data-testid": Ge("bill-pay-setup-drawer"),
+        children: /* @__PURE__ */ t.jsx(
+          st,
+          {
+            authParams: ne,
+            filesEndPoint: oe,
+            updateStatus: v,
+            onEditFileName: xe,
+            onDeleteFile: ye,
+            updateFilesEntity: Pe,
+            companyOfficer: s,
+            onClose: () => S(!1),
+            onCompanyOfficerUpdated: be,
+            onSendForVerificationClick: we
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Ze,
+      {
+        title: l.setupTitle,
+        style: { zIndex: 3 },
+        onBackClick: le,
+        showMenuIcon: !$ && (i === "medium-compact" || i === "small"),
+        onClickMenuIcon: Se,
+        scrollableContent: q,
+        backgroundColor: w.colors.grey4,
+        source: "BillPaySetUpPage"
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(pt, { windowSize: i, children: [
+      /* @__PURE__ */ t.jsx(ut, { windowSize: i, children: Ve }),
+      Oe ? /* @__PURE__ */ t.jsx(ht, { children: /* @__PURE__ */ t.jsx(Ke, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ t.jsxs(ct, { children: [
+        /* @__PURE__ */ t.jsx(ze, { ...x, children: /* @__PURE__ */ t.jsx("form", { id: Y(X), onSubmit: Ie, children: /* @__PURE__ */ t.jsxs(ft, { windowSize: i, children: [
+          /* @__PURE__ */ t.jsx(
+            U,
+            {
+              onClick: Re,
+              title: d.businessVerificationTitle,
+              subTitle: d.businessVerificationSubTitle,
+              header: d.businessVerificationHeader,
+              icon: {
+                element: /* @__PURE__ */ t.jsx(
+                  Qe,
+                  {
+                    width: o.iconWidthHeight.valuePx(i),
+                    height: o.iconWidthHeight.valuePx(i)
+                  }
+                ),
+                color: I
+              },
+              status: T?.businessVerificationStatus,
+              isLoading: Ce,
+              isActiveWhileLoading: !0
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            lt,
+            {
+              connectedAccountProvider: ee,
+              primaryFundingAccount: r,
+              allFundingAccounts: M,
+              plaidConnectionDetails: R,
+              allBankAccounts: Be,
+              sectionId: V,
+              isDisabled: P,
+              onFetchLinkTokenClick: re,
+              onEstablishConnectionClick: de,
+              onUpdatePaymentAccountStatus: fe,
+              onUpdatePaymentAccountLoginStatus: ge,
+              onEstablishConnectionSuccess: ue,
+              icon: {
+                element: /* @__PURE__ */ t.jsx(
+                  Xe,
+                  {
+                    width: o.iconWidthHeight.valuePx(i),
+                    height: o.iconWidthHeight.valuePx(i)
+                  }
+                ),
+                color: I
+              },
+              analytics: m,
+              productType: "bill_pay",
+              isAccountsEnabled: te,
+              onSignUpClick: Ae,
+              pageName: "Bill Pay Setup",
+              accountsPromoConfig: ae
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            U,
+            {
+              title: C.length > 0 ? d.approvalTitle : d.createApprovalTitle,
+              subTitle: l.approvalSubTitle,
+              header: C.length > 0 ? d.approvalHeader : d.setupApprovalHeader,
+              icon: {
+                element: /* @__PURE__ */ t.jsx(
+                  Ye,
+                  {
+                    width: o.iconWidthHeight.valuePx(i),
+                    height: o.iconWidthHeight.valuePx(i)
+                  }
+                ),
+                color: I
+              },
+              style: {
+                paddingBottom: o.lastSectionPaddingBottom.valuePx(i)
+              },
+              onClick: ce,
+              status: C.length > 0 ? je : void 0
+            }
+          )
+        ] }) }) }),
+        c === !0 ? /* @__PURE__ */ t.jsx(
+          U,
+          {
+            title: B ? l.enableInternationalWireTitle : l.internationWireTitle,
+            subTitle: l.internationalWireSubTitle2,
+            header: l.internationalWireHeader,
+            icon: {
+              element: /* @__PURE__ */ t.jsx(
+                tt,
+                {
+                  width: o.iconWidthHeight.valuePx(i),
+                  height: o.iconWidthHeight.valuePx(i)
+                }
+              ),
+              color: I
+            },
+            style: {
+              paddingBottom: o.lastSectionPaddingBottom.valuePx(i)
+            },
+            isClickable: !0,
+            onClick: () => {
+              B && m.trackEnableIntlWire(ie), ve?.();
+            },
+            status: B ? void 0 : {
+              name: h.name,
+              code: h.code
+            },
+            statusInfoIcon: h?.code === "verification_pending" || h?.code === "verification_failed" ? /* @__PURE__ */ t.jsx(
+              et,
+              {
+                title: h.code === "verification_pending" ? l.tooltipTexts.pendingInternationalVerificationText : l.tooltipTexts.internationalVerificationFailed,
+                children: /* @__PURE__ */ t.jsx(dt, {})
+              }
+            ) : void 0,
+            shouldHover: !0,
+            showRightArrow: B
+          }
+        ) : null
+      ] })
+    ] }),
+    H && !$ && C.length > 0 ? /* @__PURE__ */ t.jsx(
+      it,
+      {
+        formId: Y(X),
+        primaryBtn: {
+          label: l.enableBillPay,
+          style: {
+            width: "auto",
+            minWidth: i === "small" ? "auto" : "181px"
+          },
+          isLoading: v.fetchState === "In-Progress" || Te.fetchState === "In-Progress",
+          isDisabled: P != null
+        },
+        showCancel: !1,
+        helperText: l.terms,
+        cancelBtn: { label: "" },
+        style: {
+          padding: `12px ${E.sp3}`
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ t.jsx(
+      at,
+      {
+        isFooterRendered: H && !$,
+        meetingUrl: b,
+        analytics: m,
+        productType: "bill_pay"
+      }
+    )
+  ] });
+}, ct = g.div``, rt = g.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+  height: 100vh;
+  overflow-y: auto;
+`, dt = g(nt)`
+  width: ${E.sp3};
+  height: ${E.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, ut = g(ot)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${(e) => o.titleWidth.valuePx(e.windowSize)};
+  padding-top: ${(e) => o.subTitlePaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => o.subTitlePaddingBottom.valuePx(e.windowSize)};
+  text-align: ${(e) => e.windowSize === "small" ? "initial" : "center"};
+`, pt = g.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  align-items: center;
+  row-gap: ${(e) => o.setupDetailsRowGap.valuePx(e.windowSize)};
+`, ht = g.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 110px);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, ft = g.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${(e) => o.sectionRowGap.valuePx(e.windowSize)};
+`, L = (e) => {
+  const { allBankAccounts: P, allFundingAccounts: O, primaryFundingAccount: b } = e;
+  return {
+    [V]: {
+      fundingAccount: {
+        selectedOption: b?.id,
+        allOptions: O.map((c) => ({
+          label: c.label,
+          value: c.id,
+          isRecommended: c.accType === "depositAccount"
+        }))
+      },
+      account: {
+        selectedOption: b?.zeniAccountId,
+        allOptions: P.map((c) => ({
+          label: c.accountName,
+          value: c.accountId
+        }))
+      }
+    }
+  };
+}, Y = (e) => `${e}_form`;
+export {
+  Tt as default,
+  Y as uniqueName
+};

package/dist/BillPaySetUpPage-xsxFE4q7.cjs

@@ -0,0 +1,42 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./vendor-.pnpm-BW93Fnli.cjs"),h=require("react"),m=require("@emotion/styled"),De=require("@zeniai/client-epic-state"),e=require("./index-C8marfrT.cjs"),We=require("./HelpButton-Cf8J8IY2.cjs");require("./SetUpAccountSection-31I4dL0f.cjs");const q=require("./SetUpDefaultSection-DiSnk9Et.cjs"),ke=require("./SpendMgmtSetupAccountSection-9Er5p0R0.cjs"),Oe=require("./UploadAdditionalDocumentOverlay-BO2QYMCG.cjs"),o={titleWidth:new e.ResponsiveSized(343,580,726,826),setupDetailsRowGap:new e.ResponsiveSized(12,e.sp[5],e.sp[5]),sectionRowGap:new e.ResponsiveSized(e.sp[5],e.sp[9],e.sp[9]),lastSectionPaddingBottom:new e.ResponsiveSized(e.sp[7],e.sp[10],e.sp[10]),iconWidthHeight:new e.ResponsiveSized(20,e.sp[4]),subTitlePaddingTop:new e.ResponsiveSized(12,e.sp[3]),subTitlePaddingBottom:new e.ResponsiveSized(e.sp[3],e.sp[3]),overlayWidth:new e.ResponsiveSized(100,100,59)},K="billPaySetUpPage",I="billPayAccount",Ve=({billPaySetupView:t,isDisabled:P,billpayApprovalView:D,meetingUrl:b,showIntlWiseWidget:c,connectedAccountProvider:Q,isAccountsEnabled:X,isLocalCurrencyEnabled:Y,analytics:x,filesEndPoint:Z,authParams:ee,accountsPromoConfig:te,onBackClick:ie,onBusinessVerificationSectionClick:ne,onSetupApprovalRulesSectionClick:oe,onFetchLinkTokenClick:se,onEstablishConnectionClick:ae,onEstablishConnectionSuccess:le,onUpdatePrimaryFundingAccount:ce,onUpdateAccountClick:re,onUpdatePaymentAccountStatus:ue,onUpdatePaymentAccountLoginStatus:de,onEnableBillPayClick:pe,onEnableBillPaySuccess:U,onClickMenuIcon:fe,onInternationPaymentSetUpClick:he,onEditFileName:me,onDeleteFile:xe,updateFilesEntity:ge,onCompanyOfficerUpdated:Se,onSendForVerificationClick:ve,onSignUpClick:ye})=>{const w=i.useTheme(),n=e.useWindowSizeContext(),[j,g]=h.useState(!1),$=h.useRef(null),{fetchState:d,updateStatus:S,accountUpdateStatus:Pe,plaidConnectionDetails:W,allBankAccounts:be,companyBillPayInfo:R,isRefreshingViewInBackground:we,selectedCompanyOfficer:l,primaryFundingAccount:r,allFundingAccounts:L}=t,p=R?.internationalWireOnboardingStatus,A=p==null||p.code==="onboarding_status_not_started",{fetchState:M,allApprovalRules:T,approvalRulesStatus:je}=D,k=W.link_account.updateStatus,O=W.update_account.updateStatus,B=e.usePrevious(d),N=e.usePrevious(S.fetchState),G=e.usePrevious(k.fetchState),J=e.usePrevious(O.fetchState),v=i.useForm({mode:"all",reValidateMode:"onChange",defaultValues:h.useMemo(()=>H(t),[t]),values:H(t)});h.useEffect(()=>{!j&&l?.additionalDocumentTypesRequestedForVerification.includes("social_security_card")===!0&&l.areAdditionalDocumentsRequestedForVerification&&!l.areAdditionalDocumentsSubmittedForVerification&&l.userVerificationStatus?.code==="require_info"&&g(!0),j&&B==="In-Progress"&&d==="Completed"&&g(!1)},[l,d,B]),h.useEffect(()=>{(B==="In-Progress"&&d==="Completed"||G==="In-Progress"&&k.fetchState==="Completed"||J==="In-Progress"&&O.fetchState==="Completed")&&v.reset(H(t))},[B,d,v,t,G,k.fetchState,J,O.fetchState]);const Re=v.handleSubmit(y=>{x.trackEnableBillPay(),pe()}),Ae=async(y,E)=>{const s=E[I];if(y.includes(I)){if(y.includes("fundingAccount")){if(s.fundingAccount.selectedOption!=null&&r?.id!=s.fundingAccount.selectedOption){const f=L.find(_=>_.id===s.fundingAccount.selectedOption);f!=null&&ce(s.fundingAccount.selectedOption,f.accType)}}else if(s.account.selectedOption!=null&&r?.id!=null&&r?.zeniAccountId!=s.account.selectedOption){const f=s.account.allOptions.find(_=>_.value===s.account.selectedOption);f!=null&&typeof f.label=="string"&&x.trackConnectBankLink(f.value,f.label,"bill_pay"),re(s.account.selectedOption,r.id,r.accType)}}};h.useEffect(()=>{const y=v.watch((E,{name:s})=>{s!=null&&E!=null&&i.defer(()=>Ae(s,E))});return()=>{y.unsubscribe()}}),h.useEffect(()=>{N==="In-Progress"&&S.fetchState==="Completed"&&U()},[U,N,S.fetchState]);const{commonSetUp:Te,spendManagement:Be}=e.appLocale.getLocalizedStrings(),{setUp:u}=Te,{billPaySetup:a}=Be.billPay,V=R?.isBusinessVerified===!0&&(r?.accType==="depositAccount"||De.isVerifiedPaymentAccountProviderStatusCode(r?.providerVerificationStatus?.code??"")),z=R?.isBillPayEnabled===!0,Ce=V?u.setupVerifiedSubTitle:a.setupSubTitle,Ee=d==="In-Progress"||d==="Not-Started"||M==="In-Progress"||M==="Not-Started",C=w.mode==="light"?new i.Color(w.colors.brandColorJadeLight):new i.Color(w.colors.brandColorJadeDark),Ie=()=>{!j&&l?.additionalDocumentTypesRequestedForVerification.includes("social_security_card")===!0&&l.areAdditionalDocumentsRequestedForVerification&&!l.areAdditionalDocumentsSubmittedForVerification&&l.userVerificationStatus?.code==="require_info"?g(!0):ne?.()};return i.jsxRuntimeExports.jsxs(_e,{ref:$,children:[i.jsxRuntimeExports.jsx(i.Drawer,{anchor:"right",PaperProps:{style:{width:o.overlayWidth.valuePercentage(n),boxShadow:"none"}},open:j,onClose:()=>g(!1),style:{backgroundColor:e.Colors.drawerBackground},transitionDuration:250,"data-testid":e.generateDataTestId("bill-pay-setup-drawer"),children:i.jsxRuntimeExports.jsx(Oe.UploadAdditionalDocumentOVerlay,{authParams:ee,filesEndPoint:Z,updateStatus:S,onEditFileName:me,onDeleteFile:xe,updateFilesEntity:ge,companyOfficer:l,onClose:()=>g(!1),onCompanyOfficerUpdated:Se,onSendForVerificationClick:ve})}),i.jsxRuntimeExports.jsx(e.NavBar,{title:a.setupTitle,style:{zIndex:3},onBackClick:ie,showMenuIcon:!z&&(n==="medium-compact"||n==="small"),onClickMenuIcon:fe,scrollableContent:$,backgroundColor:w.colors.grey4,source:"BillPaySetUpPage"}),i.jsxRuntimeExports.jsxs(Fe,{windowSize:n,children:[i.jsxRuntimeExports.jsx(He,{windowSize:n,children:Ce}),Ee?i.jsxRuntimeExports.jsx(Ue,{children:i.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"ExtraLarge",start:!0})}):i.jsxRuntimeExports.jsxs(ze,{children:[i.jsxRuntimeExports.jsx(i.FormProvider,{...v,children:i.jsxRuntimeExports.jsx("form",{id:F(K),onSubmit:Re,children:i.jsxRuntimeExports.jsxs($e,{windowSize:n,children:[i.jsxRuntimeExports.jsx(q.SetUpDefaultSection,{onClick:Ie,title:u.businessVerificationTitle,subTitle:u.businessVerificationSubTitle,header:u.businessVerificationHeader,icon:{element:i.jsxRuntimeExports.jsx(e.SvgDocuments,{width:o.iconWidthHeight.valuePx(n),height:o.iconWidthHeight.valuePx(n)}),color:C},status:R?.businessVerificationStatus,isLoading:we,isActiveWhileLoading:!0}),i.jsxRuntimeExports.jsx(ke.SpendMgmtSetupAccountSection,{connectedAccountProvider:Q,primaryFundingAccount:r,allFundingAccounts:L,plaidConnectionDetails:W,allBankAccounts:be,sectionId:I,isDisabled:P,onFetchLinkTokenClick:se,onEstablishConnectionClick:ae,onUpdatePaymentAccountStatus:ue,onUpdatePaymentAccountLoginStatus:de,onEstablishConnectionSuccess:le,icon:{element:i.jsxRuntimeExports.jsx(e.SvgBankBuilding,{width:o.iconWidthHeight.valuePx(n),height:o.iconWidthHeight.valuePx(n)}),color:C},analytics:x,productType:"bill_pay",isAccountsEnabled:X,onSignUpClick:ye,pageName:"Bill Pay Setup",accountsPromoConfig:te}),i.jsxRuntimeExports.jsx(q.SetUpDefaultSection,{title:T.length>0?u.approvalTitle:u.createApprovalTitle,subTitle:a.approvalSubTitle,header:T.length>0?u.approvalHeader:u.setupApprovalHeader,icon:{element:i.jsxRuntimeExports.jsx(e.SvgLike,{width:o.iconWidthHeight.valuePx(n),height:o.iconWidthHeight.valuePx(n)}),color:C},style:{paddingBottom:o.lastSectionPaddingBottom.valuePx(n)},onClick:oe,status:T.length>0?je:void 0})]})})}),c===!0?i.jsxRuntimeExports.jsx(q.SetUpDefaultSection,{title:A?a.enableInternationalWireTitle:a.internationWireTitle,subTitle:a.internationalWireSubTitle2,header:a.internationalWireHeader,icon:{element:i.jsxRuntimeExports.jsx(e.SvgPaymentIntWire,{width:o.iconWidthHeight.valuePx(n),height:o.iconWidthHeight.valuePx(n)}),color:C},style:{paddingBottom:o.lastSectionPaddingBottom.valuePx(n)},isClickable:!0,onClick:()=>{A&&x.trackEnableIntlWire(Y),he?.()},status:A?void 0:{name:p.name,code:p.code},statusInfoIcon:p?.code==="verification_pending"||p?.code==="verification_failed"?i.jsxRuntimeExports.jsx(e.Tooltip,{title:p.code==="verification_pending"?a.tooltipTexts.pendingInternationalVerificationText:a.tooltipTexts.internationalVerificationFailed,children:i.jsxRuntimeExports.jsx(qe,{})}):void 0,shouldHover:!0,showRightArrow:A}):null]})]}),V&&!z&&T.length>0?i.jsxRuntimeExports.jsx(e.Footer,{formId:F(K),primaryBtn:{label:a.enableBillPay,style:{width:"auto",minWidth:n==="small"?"auto":"181px"},isLoading:S.fetchState==="In-Progress"||Pe.fetchState==="In-Progress",isDisabled:P!=null},showCancel:!1,helperText:a.terms,cancelBtn:{label:""},style:{padding:`12px ${e.Space.sp3}`}}):null,i.jsxRuntimeExports.jsx(We.HelpButton,{isFooterRendered:V&&!z,meetingUrl:b,analytics:x,productType:"bill_pay"})]})},ze=m.div``,_e=m.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${t=>t.theme.colors.grey4};
+  height: 100vh;
+  overflow-y: auto;
+`,qe=m(e.SvgInfo)`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  color: ${t=>t.theme.colors.hero};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`,He=m(e.StandardRegular)`
+  color: ${t=>t.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${t=>o.titleWidth.valuePx(t.windowSize)};
+  padding-top: ${t=>o.subTitlePaddingTop.valuePx(t.windowSize)};
+  padding-bottom: ${t=>o.subTitlePaddingBottom.valuePx(t.windowSize)};
+  text-align: ${t=>t.windowSize==="small"?"initial":"center"};
+`,Fe=m.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  align-items: center;
+  row-gap: ${t=>o.setupDetailsRowGap.valuePx(t.windowSize)};
+`,Ue=m.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 110px);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${t=>t.theme.colors.grey4};
+`,$e=m.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${t=>o.sectionRowGap.valuePx(t.windowSize)};
+`,H=t=>{const{allBankAccounts:P,allFundingAccounts:D,primaryFundingAccount:b}=t;return{[I]:{fundingAccount:{selectedOption:b?.id,allOptions:D.map(c=>({label:c.label,value:c.id,isRecommended:c.accType==="depositAccount"}))},account:{selectedOption:b?.zeniAccountId,allOptions:P.map(c=>({label:c.accountName,value:c.accountId}))}}}},F=t=>`${t}_form`;exports.default=Ve;exports.uniqueName=F;

package/dist/BillingSettingsPage-6fiJX4X0.cjs

@@ -0,0 +1,44 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-.pnpm-BW93Fnli.cjs"),q=require("react"),c=require("@emotion/styled"),e=require("./index-C8marfrT.cjs"),P=require("./PaymentAccountSetupBillingAddressSection-ZCwLaDhr.cjs"),xe=require("./SetUpAccountSection-31I4dL0f.cjs"),p={titleWidth:new e.ResponsiveSized(343,580,726,826),setupDetailsRowGap:new e.ResponsiveSized(12,e.sp[5],e.sp[5]),sectionRowGap:new e.ResponsiveSized(e.sp[5],e.sp[9],e.sp[9]),iconWidthHeight:new e.ResponsiveSized(20,e.sp[4]),subTitlePaddingTop:new e.ResponsiveSized(12,e.sp[3]),termsPaddingLeftRight:new e.ResponsiveSized(e.sp[0],e.sp[3])},Se={title:new e.ResponsiveSizedStyle("standardSemiBold","largeSemiBold")},D="billingSetupPage",v="payAccountSectionId",s="subscriptionBillingAddressSectionId",ye=({analytics:t,billingSetupView:r,connectedAccountProvider:h,isDisabled:a,onClickMenuIcon:b,uiState:F,stripeKey:M,googleAPIKey:H,companyId:U,onUpdateAccountClick:N,onFetchLinkTokenClick:G,onUpdatePaymentAccountStatus:J,onUpdatePaymentAccountLoginStatus:K,onEstablishConnectionClick:Z,onEstablishConnectionSuccess:Q,handleCreateCardSetupIntent:X,handleConfirmCardSetupIntent:Y,updateCardPaymentModalState:B,handleAddCardPaymentSource:ee,resetCardPaymentViewState:te,handleResetCardPaymentErrorStatuses:ne,onBillingAddressSave:se,onAddressEditHandler:oe})=>{const w=n.useTheme(),o=e.useWindowSizeContext(),{setupView:{paymentAccount:x,plaidConnectionDetails:ie,allBankAccounts:re,accountFetchStatus:I},cardPaymentView:g}=r,ce=r.subscriptionBillingAddress,E=x?.providerVerificationStatus,ae=I.fetchState==="In-Progress"||I.fetchState==="Not-Started",S=n.useForm({mode:"onSubmit",reValidateMode:"onChange",defaultValues:_(r),values:_(r),resetOptions:{keepDirtyValues:!0}}),de=S.handleSubmit(l=>{se(U)}),$=r.subscriptionBillingAddressSaveStatus,le=async(l,i)=>{const m=i[v];if(l.includes(s)&&i[s]!=null){const C=S.getValues(`${s}`).country;let u=i[s];if(l.includes(`${s}.street`)&&i[s].street!=null){const{addressValue:f}=i[s].street,A=e.getCountryOptions(f?.country);u={street:i[s].street??d.strings.empty,city:f?.locality??d.strings.empty,state:f?.administrativeAreaLevel1??d.strings.empty,country:A,countryCode:f?.countryCode??d.strings.empty,postalCode:f?.postalCode??d.strings.empty,secondaryInfo:i[s].secondaryInfo,suite:i[s].suite},C.selectedOption!==A.selectedOption&&(u={...u,country:A})}else l===`${s}.country`&&C.selectedOption!=null&&(u={...u,countryCode:e.getAlpha2(C.selectedOption)});u!=null&&oe(u)}else l.includes(v)&&m.account.selectedOption!=null&&x?.paymentAccountId!=null&&x.zeniAccountId!==m.account.selectedOption&&N(m.account.selectedOption,x.paymentAccountId)};q.useEffect(()=>{const l=S.watch((i,{name:m})=>{m!=null&&i!=null&&n.defer(()=>le(m,i))});return()=>{l.unsubscribe()}});const z=w.mode==="light"?new n.Color(w.colors.brandColorJadeLight):new n.Color(w.colors.brandColorJadeDark),{customerOnboardingPage:{sections:{link_payment_account:ue,card_payment_method:y}},common:d,billingSetupPage:T}=e.appLocale.getLocalizedStrings(),pe=T.section.subTitle,{text:ge,subText:me}=ue,O=g.cardsList.length>0,L=g?.cardsList[0]?.brand??"other",k=g?.addCardPaymentSourceStatus.fetchState,j=P.cardPaymentMethodValues(y.header,y.titleText,y.protectedCardNo,g);let V;O&&(V={header:j.header,title:j.title,subtitle:j.subtitle,status:j.status==="valid"?{name:"Verified",code:"verified"}:{name:"Pending",code:"pending"},showAddPaymentMethodDropDown:O===!0,icon:{element:n.jsxRuntimeExports.jsx("img",{src:P.getCardBrandIconUrl(L).iconURL,width:p.iconWidthHeight.valuePx(o),height:p.iconWidthHeight.valuePx(o),alt:P.getCardBrandIconUrl(L).name}),color:new n.Color(z)},showCompletedIcon:!1,isError:k==="Error",isLoading:k==="In-Progress",isCompleted:!0,showRightArrow:!1});const[W,he]=q.useState(!1);return n.jsxRuntimeExports.jsxs(we,{children:[n.jsxRuntimeExports.jsx(e.NavBar,{source:"BillingSettingsPage",title:T.section.title,backgroundColor:w.colors.grey4,style:{zIndex:3},showBackButton:!1,showMenuIcon:o==="medium-compact"||o==="small",onClickMenuIcon:b}),n.jsxRuntimeExports.jsxs(fe,{windowSize:o,children:[n.jsxRuntimeExports.jsx(je,{windowSize:o,children:pe}),ae?n.jsxRuntimeExports.jsx(Pe,{children:n.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"ExtraLarge",start:!0})}):n.jsxRuntimeExports.jsx(n.FormProvider,{...S,children:n.jsxRuntimeExports.jsx(Re,{children:n.jsxRuntimeExports.jsx("form",{id:R(D),onSubmit:de,children:n.jsxRuntimeExports.jsxs(ve,{windowSize:o,children:[n.jsxRuntimeExports.jsx(xe.SetUpAccountSection,{connectedAccountProvider:h,paymentAccount:x,plaidConnectionDetails:ie,allBankAccounts:re,header:y.header,sectionTitle:y.header,defaultSectionTitle:ge,defaultSectionSubTitle:me,sectionId:v,isDisabled:a,onFetchLinkTokenClick:G,onEstablishConnectionClick:Z,onUpdatePaymentAccountStatus:J,onUpdatePaymentAccountLoginStatus:K,onEstablishConnectionSuccess:Q,isError:E?.code==="require_info"||E?.code==="failed",icon:{element:n.jsxRuntimeExports.jsx(e.SvgBankBuilding,{width:p.iconWidthHeight.valuePx(o),height:p.iconWidthHeight.valuePx(o)}),color:z},analytics:t,productType:"billing",updateCardPaymentModalState:B,cardPaymentSectionValues:V,cardPaymentView:g,resetCardPaymentViewState:te,showZeniAccountSection:!1,referrer:"Billing",cardSetupInProgress:W}),be(o,d.headers.billingAddress,ce,H,a)]})})})}),e.formHasDirtyFields(S.formState.dirtyFields)?n.jsxRuntimeExports.jsx(e.Footer,{formId:R(D),style:{width:o==="small"?"auto":"100%",paddingTop:e.Space.sp2,paddingBottom:e.Space.sp2,height:e.Space.sp8},primaryBtn:{label:d.footer.save,isLoading:$?.fetchState==="In-Progress",isDisabled:$?.fetchState==="In-Progress",style:{height:e.Space.sp6}},showCancel:!1,containerStyle:{width:"auto",justifyContent:"center"}}):null]}),n.jsxRuntimeExports.jsx(P.CardPaymentModal,{handleConfirmCardSetupIntent:Y,updateCardPaymentModalState:B,handleCreateCardSetupIntent:X,handleAddCardPaymentSource:ee,cardPaymentView:g,isCardPaymentOpen:F.isCardPaymentPopupOpen,handleResetCardPaymentErrorStatuses:ne,stripeKey:M,cardSetupInProgress:W,setCardSetupInProgress:he})]})},_=t=>{const{paymentAccount:r,allBankAccounts:h}=t.setupView;return{[v]:{account:{selectedOption:r?.zeniAccountId,allOptions:h.map(a=>({label:a.accountName,value:a.accountId}))}},[s]:e.getAddressDefaultValues(s,t.subscriptionBillingAddress)[s]}},fe=c.div`
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+  row-gap: ${t=>p.setupDetailsRowGap.valuePx(t.windowSize)};
+`,we=c.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${t=>t.theme.colors.grey4};
+`,je=c(e.StandardRegular)`
+  color: ${t=>t.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${t=>p.titleWidth.valuePx(t.windowSize)};
+  padding-top: ${t=>p.subTitlePaddingTop.valuePx(t.windowSize)};
+  padding-bottom: ${e.Space.sp3};
+  text-align: ${t=>t.windowSize==="small"?"initial":"center"};
+`,Pe=c.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 110px);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${t=>t.theme.colors.grey4};
+`,ve=c.div`
+  display: flex;
+  flex-direction: column;
+`,be=(t,r,h,a,b)=>n.jsxRuntimeExports.jsxs(Ce,{children:[n.jsxRuntimeExports.jsx(Ae,{windowSize:t,isDisabled:b==="disabled",children:r}),n.jsxRuntimeExports.jsx(e.AddressSection,{googleAPIKey:a??"",addressToEdit:h,sectionId:`${s}`,style:{marginLeft:"0px"},elementsStyle:{paddingRight:"0px"}})]}),Ce=c.div`
+  margin-top: ${e.Space.sp3};
+  margin-bottom: ${e.Space.sp4};
+`,Ae=c.div`
+  ${t=>`${Se.title.style(t.windowSize)}`};
+  margin-bottom: ${e.Space.sp3};
+  margin-top: ${e.Space.sp4};
+  color: ${t=>t.isError===!0?e.Colors.important:t.isDisabled===!0?t.theme.colors.grey1:t.theme.colors.primary};
+`,Re=c.div`
+  flex: 1;
+`,R=t=>`${t}_form`;exports.default=ye;exports.uniqueName=R;