@zeniai/web-components 3.17.1 → 3.17.2

package/dist/BillingSettingsPage-DDJQLA1H.js

@@ -0,0 +1,336 @@
+import { u as Se, g as xe, h as we, b as j, j as t, F as Pe } from "./vendor-.pnpm-B2klaOGU.js";
+import { useEffect as be, useState as Ce } from "react";
+import c from "@emotion/styled";
+import { u as ve, a as Ae, R as y, aE as Be, A as Ie, eP as je, aG as $e, ao as Te, S as a, jl as ze, hi as Oe, dU as Le, D as r, o as Re, iJ as ke, aw as Ve, C as We } from "./index-BEMjPEfs.js";
+import { c as De, g as F, C as Ee } from "./PaymentAccountSetupBillingAddressSection-DOl68z9q.js";
+import { S as Fe } from "./SetUpAccountSection-Dkkm2ulS.js";
+const g = {
+  titleWidth: new y(343, 580, 726, 826),
+  setupDetailsRowGap: new y(12, r[5], r[5]),
+  sectionRowGap: new y(r[5], r[9], r[9]),
+  iconWidthHeight: new y(20, r[4]),
+  subTitlePaddingTop: new y(12, r[3]),
+  termsPaddingLeftRight: new y(r[0], r[3])
+}, He = {
+  title: new Ve("standardSemiBold", "largeSemiBold")
+}, H = "billingSetupPage", v = "payAccountSectionId", s = "subscriptionBillingAddressSectionId", nt = ({
+  analytics: e,
+  billingSetupView: i,
+  connectedAccountProvider: f,
+  isDisabled: l,
+  onClickMenuIcon: A,
+  uiState: U,
+  stripeKey: N,
+  googleAPIKey: G,
+  companyId: J,
+  onUpdateAccountClick: q,
+  onFetchLinkTokenClick: K,
+  onUpdatePaymentAccountStatus: Z,
+  onUpdatePaymentAccountLoginStatus: Q,
+  onEstablishConnectionClick: X,
+  onEstablishConnectionSuccess: Y,
+  handleCreateCardSetupIntent: ee,
+  handleConfirmCardSetupIntent: te,
+  updateCardPaymentModalState: $,
+  handleAddCardPaymentSource: se,
+  resetCardPaymentViewState: ne,
+  handleResetCardPaymentErrorStatuses: oe,
+  onBillingAddressSave: ie,
+  onAddressEditHandler: re
+}) => {
+  const b = Se(), n = ve(), {
+    setupView: {
+      paymentAccount: S,
+      plaidConnectionDetails: ae,
+      allBankAccounts: ce,
+      accountFetchStatus: T
+    },
+    cardPaymentView: h
+  } = i, le = i.subscriptionBillingAddress, z = S?.providerVerificationStatus, de = T.fetchState === "In-Progress" || T.fetchState === "Not-Started", x = xe({
+    mode: "onSubmit",
+    reValidateMode: "onChange",
+    defaultValues: M(i),
+    values: M(i),
+    resetOptions: {
+      keepDirtyValues: !0
+    }
+  }), ue = x.handleSubmit((u) => {
+    ie(J);
+  }), O = i.subscriptionBillingAddressSaveStatus, pe = async (u, o) => {
+    const m = o[v];
+    if (u.includes(s) && o[s] != null) {
+      const B = x.getValues(
+        `${s}`
+      ).country;
+      let p = o[s];
+      if (u.includes(`${s}.street`) && o[s].street != null) {
+        const { addressValue: P } = o[s].street, I = Oe(P?.country);
+        p = {
+          street: o[s].street ?? d.strings.empty,
+          city: P?.locality ?? d.strings.empty,
+          state: P?.administrativeAreaLevel1 ?? d.strings.empty,
+          country: I,
+          countryCode: P?.countryCode ?? d.strings.empty,
+          postalCode: P?.postalCode ?? d.strings.empty,
+          secondaryInfo: o[s].secondaryInfo,
+          suite: o[s].suite
+        }, B.selectedOption !== I.selectedOption && (p = {
+          ...p,
+          country: I
+        });
+      } else u === `${s}.country` && B.selectedOption != null && (p = {
+        ...p,
+        countryCode: Le(B.selectedOption)
+      });
+      p != null && re(p);
+    } else u.includes(v) && m.account.selectedOption != null && S?.paymentAccountId != null && S.zeniAccountId !== m.account.selectedOption && q(
+      m.account.selectedOption,
+      S.paymentAccountId
+    );
+  };
+  be(() => {
+    const u = x.watch((o, { name: m }) => {
+      m != null && o != null && we(() => pe(m, o));
+    });
+    return () => {
+      u.unsubscribe();
+    };
+  });
+  const L = b.mode === "light" ? new j(b.colors.brandColorJadeLight) : new j(b.colors.brandColorJadeDark), {
+    customerOnboardingPage: {
+      sections: { link_payment_account: ge, card_payment_method: w }
+    },
+    common: d,
+    billingSetupPage: R
+  } = Ae.getLocalizedStrings(), he = R.section.subTitle, { text: me, subText: ye } = ge, k = h.cardsList.length > 0, V = h?.cardsList[0]?.brand ?? "other", W = h?.addCardPaymentSourceStatus.fetchState, C = De(
+    w.header,
+    w.titleText,
+    w.protectedCardNo,
+    h
+  );
+  let D;
+  k && (D = {
+    header: C.header,
+    title: C.title,
+    subtitle: C.subtitle,
+    status: C.status === "valid" ? {
+      name: "Verified",
+      code: "verified"
+    } : {
+      name: "Pending",
+      code: "pending"
+    },
+    showAddPaymentMethodDropDown: k === !0,
+    icon: {
+      element: /* @__PURE__ */ t.jsx(
+        "img",
+        {
+          src: F(V).iconURL,
+          width: g.iconWidthHeight.valuePx(n),
+          height: g.iconWidthHeight.valuePx(n),
+          alt: F(V).name
+        }
+      ),
+      color: new j(L)
+    },
+    showCompletedIcon: !1,
+    isError: W === "Error",
+    isLoading: W === "In-Progress",
+    isCompleted: !0,
+    showRightArrow: !1
+  });
+  const [E, fe] = Ce(!1);
+  return /* @__PURE__ */ t.jsxs(_e, { children: [
+    /* @__PURE__ */ t.jsx(
+      Be,
+      {
+        source: "BillingSettingsPage",
+        title: R.section.title,
+        backgroundColor: b.colors.grey4,
+        style: { zIndex: 3 },
+        showBackButton: !1,
+        showMenuIcon: n === "medium-compact" || n === "small",
+        onClickMenuIcon: A
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(Me, { windowSize: n, children: [
+      /* @__PURE__ */ t.jsx(Ue, { windowSize: n, children: he }),
+      de ? /* @__PURE__ */ t.jsx(Ne, { children: /* @__PURE__ */ t.jsx(Ie, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ t.jsx(Pe, { ...x, children: /* @__PURE__ */ t.jsx(Ze, { children: /* @__PURE__ */ t.jsx("form", { id: _(H), onSubmit: ue, children: /* @__PURE__ */ t.jsxs(Ge, { windowSize: n, children: [
+        /* @__PURE__ */ t.jsx(
+          Fe,
+          {
+            connectedAccountProvider: f,
+            paymentAccount: S,
+            plaidConnectionDetails: ae,
+            allBankAccounts: ce,
+            header: w.header,
+            sectionTitle: w.header,
+            defaultSectionTitle: me,
+            defaultSectionSubTitle: ye,
+            sectionId: v,
+            isDisabled: l,
+            onFetchLinkTokenClick: K,
+            onEstablishConnectionClick: X,
+            onUpdatePaymentAccountStatus: Z,
+            onUpdatePaymentAccountLoginStatus: Q,
+            onEstablishConnectionSuccess: Y,
+            isError: z?.code === "require_info" || z?.code === "failed",
+            icon: {
+              element: /* @__PURE__ */ t.jsx(
+                je,
+                {
+                  width: g.iconWidthHeight.valuePx(n),
+                  height: g.iconWidthHeight.valuePx(n)
+                }
+              ),
+              color: L
+            },
+            analytics: e,
+            productType: "billing",
+            updateCardPaymentModalState: $,
+            cardPaymentSectionValues: D,
+            cardPaymentView: h,
+            resetCardPaymentViewState: ne,
+            showZeniAccountSection: !1,
+            referrer: "Billing",
+            cardSetupInProgress: E
+          }
+        ),
+        Je(
+          n,
+          d.headers.billingAddress,
+          le,
+          G,
+          l
+        )
+      ] }) }) }) }),
+      $e(x.formState.dirtyFields) ? /* @__PURE__ */ t.jsx(
+        Te,
+        {
+          formId: _(H),
+          style: {
+            width: n === "small" ? "auto" : "100%",
+            paddingTop: a.sp2,
+            paddingBottom: a.sp2,
+            height: a.sp8
+          },
+          primaryBtn: {
+            label: d.footer.save,
+            isLoading: O?.fetchState === "In-Progress",
+            isDisabled: O?.fetchState === "In-Progress",
+            style: {
+              height: a.sp6
+            }
+          },
+          showCancel: !1,
+          containerStyle: {
+            width: "auto",
+            justifyContent: "center"
+          }
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ t.jsx(
+      Ee,
+      {
+        handleConfirmCardSetupIntent: te,
+        updateCardPaymentModalState: $,
+        handleCreateCardSetupIntent: ee,
+        handleAddCardPaymentSource: se,
+        cardPaymentView: h,
+        isCardPaymentOpen: U.isCardPaymentPopupOpen,
+        handleResetCardPaymentErrorStatuses: oe,
+        stripeKey: N,
+        cardSetupInProgress: E,
+        setCardSetupInProgress: fe
+      }
+    )
+  ] });
+}, M = (e) => {
+  const { paymentAccount: i, allBankAccounts: f } = e.setupView;
+  return {
+    [v]: {
+      account: {
+        selectedOption: i?.zeniAccountId,
+        allOptions: f.map((l) => ({
+          label: l.accountName,
+          value: l.accountId
+        }))
+      }
+    },
+    [s]: ze(
+      s,
+      e.subscriptionBillingAddress
+    )[s]
+  };
+}, Me = c.div`
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+  row-gap: ${(e) => g.setupDetailsRowGap.valuePx(e.windowSize)};
+`, _e = c.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, Ue = c(Re)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${(e) => g.titleWidth.valuePx(e.windowSize)};
+  padding-top: ${(e) => g.subTitlePaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${a.sp3};
+  text-align: ${(e) => e.windowSize === "small" ? "initial" : "center"};
+`, Ne = c.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};
+`, Ge = c.div`
+  display: flex;
+  flex-direction: column;
+`, Je = (e, i, f, l, A) => /* @__PURE__ */ t.jsxs(qe, { children: [
+  /* @__PURE__ */ t.jsx(
+    Ke,
+    {
+      windowSize: e,
+      isDisabled: A === "disabled",
+      children: i
+    }
+  ),
+  /* @__PURE__ */ t.jsx(
+    ke,
+    {
+      googleAPIKey: l ?? "",
+      addressToEdit: f,
+      sectionId: `${s}`,
+      style: {
+        marginLeft: "0px"
+      },
+      elementsStyle: {
+        paddingRight: "0px"
+      }
+    }
+  )
+] }), qe = c.div`
+  margin-top: ${a.sp3};
+  margin-bottom: ${a.sp4};
+`, Ke = c.div`
+  ${(e) => `${He.title.style(e.windowSize)}`};
+  margin-bottom: ${a.sp3};
+  margin-top: ${a.sp4};
+  color: ${(e) => e.isError === !0 ? We.important : e.isDisabled === !0 ? e.theme.colors.grey1 : e.theme.colors.primary};
+`, Ze = c.div`
+  flex: 1;
+`, _ = (e) => `${e}_form`;
+export {
+  nt as default,
+  _ as uniqueName
+};

package/dist/BillingSettingsPage-PG2tA8rX.cjs

@@ -0,0 +1,44 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-.pnpm-D0ILHvHB.cjs"),q=require("react"),c=require("@emotion/styled"),e=require("./index-gTpRqqAW.cjs"),P=require("./PaymentAccountSetupBillingAddressSection-DZwQ2S1N.cjs"),xe=require("./SetUpAccountSection-yJlsKBUx.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;

package/dist/BillsBulkReviewDrawerPage-CAEcd_tI.js

@@ -0,0 +1,216 @@
+import { j as f, aO as O } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as P, useEffect as q } from "react";
+import { isBillConditionallyValid as W } from "@zeniai/client-epic-state";
+import { a as z, aP as Q, aQ as G, aR as H, dM as J } from "./index-BEMjPEfs.js";
+import { R as K } from "./ReviewOverlay-f8mDADeg.js";
+const {
+  common: l,
+  spendManagement: { billPay: x }
+} = z.getLocalizedStrings(), n = x.bulkActions;
+let B;
+const ne = ({
+  billsReviewView: t,
+  analytics: r,
+  onProceedForBulkActionClick: i,
+  onCloseReviewItem: e,
+  onCloseOverlay: c
+}) => {
+  const {
+    fetchState: m,
+    bulkSubmissionFetchState: a,
+    bulkOperationTypeSelected: o,
+    currentTab: g,
+    currentSubTab: _
+  } = t, d = o === "review", [I, h] = P(!1), [s, v] = P(
+    C(t, d)
+  ), [p, j] = P(d), [b, k] = P(0), [y, E] = P({
+    type: "",
+    title: "",
+    description: "",
+    primaryButtonText: "",
+    secondaryButtonText: ""
+  });
+  q(() => (d && (B = setInterval(() => {
+    v(
+      (u) => u.map((w, M) => (clearInterval(B), M === b ? {
+        ...w,
+        reviewStatus: {
+          isLoading: !1,
+          code: "valid"
+        }
+      } : w))
+    ), k((u) => u + 1);
+  }, 1e3)), b === s.length && p && (j(!1), clearInterval(B)), !d && t.fetchState === "Completed" && v(C(t, !1)), () => {
+    clearInterval(B);
+  }), [
+    s.length,
+    b,
+    p,
+    t.fetchState,
+    d,
+    t
+  ]);
+  const R = s.length, S = s.filter(
+    (u) => u.reviewStatus.code !== "error"
+  ).length, A = () => {
+    const { title: u, description: w } = Y(
+      S
+    );
+    E({
+      type: "reject",
+      title: u,
+      description: w,
+      primaryButtonText: l.texts.confirm,
+      secondaryButtonText: l.texts.close
+    }), r.trackBillPayBulkSubmit(
+      o,
+      g,
+      _
+    ), h(!0);
+  }, U = {
+    onOkClick: (u) => {
+      h(!1), r.trackBillPayBulkPopupConfirm(
+        o,
+        g,
+        _,
+        X(t)
+      ), i("reject", u);
+    },
+    onCancelClick: () => {
+      h(!1);
+    }
+  }, { title: N, description: D } = Z(
+    m,
+    S,
+    R,
+    p
+  ), T = t.fetchState === "Completed" && S === 0, F = () => {
+    r.trackBillPayBulkSubmit(
+      o,
+      g,
+      _
+    ), i(o);
+  }, $ = {
+    label: T ? l.texts.close : o === "send_for_approval" ? l.footer.submit : l.footer.approve,
+    isDisabled: m !== "Completed" || o === "reject" && a === "In-Progress",
+    isLoading: a === "In-Progress" && (o === "send_for_approval" || o === "approve"),
+    onClick: T ? c : F,
+    style: o === "send_for_approval" ? { minWidth: "92px" } : {}
+  }, L = {
+    label: o === "send_for_approval" ? l.texts.goBack : l.footer.reject,
+    isDisabled: o !== "reject" && a === "In-Progress",
+    isLoading: o === "reject" && a === "In-Progress",
+    reverseSpinnerColor: !1,
+    onClick: o === "send_for_approval" ? c : A,
+    style: o === "approve" ? { minWidth: "92px" } : {}
+  };
+  return /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
+    I ? /* @__PURE__ */ f.jsx(
+      Q,
+      {
+        titleComponent: /* @__PURE__ */ f.jsx(H, { children: y.title }),
+        descriptionComponent: /* @__PURE__ */ f.jsx(G, { children: y.description }),
+        primaryButtonText: y.primaryButtonText,
+        proceedButtonVariant: "danger",
+        secondaryButtonText: y.secondaryButtonText,
+        action: U,
+        isNotesIncluded: !0,
+        isEditPopup: !0
+      }
+    ) : null,
+    /* @__PURE__ */ f.jsx(
+      K,
+      {
+        title: N,
+        description: {
+          content: D,
+          isError: t.fetchState === "Completed" && S === 0
+        },
+        reviewItems: s,
+        onCloseReviewItem: e,
+        onCloseOverlay: c,
+        showFooter: t.fetchState === "Completed" && !p,
+        footerProps: {
+          primaryButton: $,
+          cancelButton: L,
+          hideCancel: T
+        }
+      }
+    )
+  ] });
+}, C = (t, r) => {
+  const i = t.fetchState === "In-Progress";
+  return t.billsForReview.map((e) => ({
+    id: e.transactionId,
+    leftSideText: {
+      title: e.vendorName ? e.vendorName : x.billDetails.newBillTitle,
+      subTitle: `${x.billDetails.invoiceNo} ${e.invoiceNumber ? e.invoiceNumber : l.strings.hyphen}`
+    },
+    rightSideText: {
+      title: J(
+        "0,0.[00]",
+        e.amount?.amount,
+        e.amount?.currencySymbol
+      ),
+      showThunderIcon: e.reviewErrors?.length === 1 && W(e.reviewErrors[0].reviewErrorCode),
+      subTitle: V(
+        e.reviewStatus === "warning",
+        e.reviewErrors?.map((c) => c.reviewInfoMessage)
+      ),
+      additonalInfo: e.reviewErrors != null && e.reviewErrors.length > 1 ? n.reviewPage.removeOrProceed : void 0
+    },
+    reviewStatus: {
+      isLoading: r ? !0 : i,
+      code: e.reviewErrors?.length === 1 && e.reviewErrors[0].reviewErrorCode === "ERR_INSUFFICIENT_FUNDS" ? "low-balance" : e.reviewStatus ?? ""
+    }
+  }));
+}, X = (t) => {
+  const r = t.billsForReview;
+  let i = [];
+  return r.forEach((e) => {
+    i = O([...i, e.isRecurring ? "recurring" : "one-time"]);
+  }), i;
+}, Y = (t) => {
+  const { this_: r, these: i, bill: e, bills: c, payment: m, payments: a } = l.texts;
+  return t > 1 ? {
+    title: n.popUps.reject.title.replace(
+      "<_payment_>",
+      n.payments
+    ),
+    description: n.popUps.reject.description.replaceAll("<_this_>", i).replaceAll("<_payment_>", a).replaceAll("<_bill_>", c)
+  } : {
+    title: n.popUps.reject.title.replace(
+      "<_payment_>",
+      n.payment
+    ),
+    description: n.popUps.reject.description.replaceAll("<_this_>", r).replaceAll("<_payment_>", m).replaceAll("<_bill_>", e)
+  };
+}, Z = (t, r, i, e) => {
+  const { has: c, have: m, bill: a, bills: o, are: g, is: _, do_: d, does: I } = l.texts, h = r > 1, s = i > 1;
+  let v = "", p = "";
+  return t === "Completed" && !e ? (v = n.reviewPage.billsReviewed.title.replace(
+    "<_bill_>",
+    s ? x.bulkActions.bills : n.bill
+  ).replace("<_has_>", s ? m : c), r === 0 ? p = n.reviewPage.billsReviewed.descriptionError.replace("<_bill_>", s ? o : a).replace("<_do_>", s ? d : I) : p = `${r}/${i} ${n.reviewPage.billsReviewed.description.replace("<_bill_>", i > 1 ? o : a).replace("<_is_>", h ? g : _)}`) : (v = n.reviewPage.billsReviewing.title.replace(
+    "<_bill_>",
+    s ? o : a
+  ), p = n.reviewPage.billsReviewing.description.replace(
+    "<_bill_>",
+    s ? o : a
+  )), {
+    title: v,
+    description: p
+  };
+}, V = (t, r) => {
+  if (r?.length != null) {
+    if (r.length > 1)
+      return r.join(` ${l.strings.dividerDot} `);
+    if (r.length === 1)
+      return t ? r[0] + `${l.strings.colon} ${n.reviewPage.removeOrProceed}` : r[0];
+  }
+  return "";
+};
+export {
+  ne as default,
+  X as getBillsUniqueType
+};

package/dist/BillsBulkReviewDrawerPage-D9cW77_0.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./vendor-.pnpm-D0ILHvHB.cjs"),f=require("react"),W=require("@zeniai/client-epic-state"),x=require("./index-gTpRqqAW.cjs"),z=require("./ReviewOverlay-CM5avoq8.cjs"),{common:l,spendManagement:{billPay:I}}=x.appLocale.getLocalizedStrings(),n=I.bulkActions;let B;const G=({billsReviewView:t,analytics:r,onProceedForBulkActionClick:i,onCloseReviewItem:e,onCloseOverlay:c})=>{const{fetchState:v,bulkSubmissionFetchState:a,bulkOperationTypeSelected:o,currentTab:_,currentSubTab:h}=t,d=o==="review",[b,S]=f.useState(!1),[s,g]=f.useState(E(t,d)),[p,R]=f.useState(d),[T,k]=f.useState(0),[y,A]=f.useState({type:"",title:"",description:"",primaryButtonText:"",secondaryButtonText:""});f.useEffect(()=>(d&&(B=setInterval(()=>{g(u=>u.map((w,M)=>(clearInterval(B),M===T?{...w,reviewStatus:{isLoading:!1,code:"valid"}}:w))),k(u=>u+1)},1e3)),T===s.length&&p&&(R(!1),clearInterval(B)),!d&&t.fetchState==="Completed"&&g(E(t,!1)),()=>{clearInterval(B)}),[s.length,T,p,t.fetchState,d,t]);const U=s.length,P=s.filter(u=>u.reviewStatus.code!=="error").length,N=()=>{const{title:u,description:w}=H(P);A({type:"reject",title:u,description:w,primaryButtonText:l.texts.confirm,secondaryButtonText:l.texts.close}),r.trackBillPayBulkSubmit(o,_,h),S(!0)},D={onOkClick:u=>{S(!1),r.trackBillPayBulkPopupConfirm(o,_,h,C(t)),i("reject",u)},onCancelClick:()=>{S(!1)}},{title:q,description:F}=J(v,P,U,p),j=t.fetchState==="Completed"&&P===0,$=()=>{r.trackBillPayBulkSubmit(o,_,h),i(o)},L={label:j?l.texts.close:o==="send_for_approval"?l.footer.submit:l.footer.approve,isDisabled:v!=="Completed"||o==="reject"&&a==="In-Progress",isLoading:a==="In-Progress"&&(o==="send_for_approval"||o==="approve"),onClick:j?c:$,style:o==="send_for_approval"?{minWidth:"92px"}:{}},O={label:o==="send_for_approval"?l.texts.goBack:l.footer.reject,isDisabled:o!=="reject"&&a==="In-Progress",isLoading:o==="reject"&&a==="In-Progress",reverseSpinnerColor:!1,onClick:o==="send_for_approval"?c:N,style:o==="approve"?{minWidth:"92px"}:{}};return m.jsxRuntimeExports.jsxs(m.jsxRuntimeExports.Fragment,{children:[b?m.jsxRuntimeExports.jsx(x.ConfirmationPopup,{titleComponent:m.jsxRuntimeExports.jsx(x.ConfirmationPopUpTitle,{children:y.title}),descriptionComponent:m.jsxRuntimeExports.jsx(x.ConfirmationPopUpDescription,{children:y.description}),primaryButtonText:y.primaryButtonText,proceedButtonVariant:"danger",secondaryButtonText:y.secondaryButtonText,action:D,isNotesIncluded:!0,isEditPopup:!0}):null,m.jsxRuntimeExports.jsx(z.ReviewOverlayPage,{title:q,description:{content:F,isError:t.fetchState==="Completed"&&P===0},reviewItems:s,onCloseReviewItem:e,onCloseOverlay:c,showFooter:t.fetchState==="Completed"&&!p,footerProps:{primaryButton:L,cancelButton:O,hideCancel:j}})]})},E=(t,r)=>{const i=t.fetchState==="In-Progress";return t.billsForReview.map(e=>({id:e.transactionId,leftSideText:{title:e.vendorName?e.vendorName:I.billDetails.newBillTitle,subTitle:`${I.billDetails.invoiceNo} ${e.invoiceNumber?e.invoiceNumber:l.strings.hyphen}`},rightSideText:{title:x.amountValueToString("0,0.[00]",e.amount?.amount,e.amount?.currencySymbol),showThunderIcon:e.reviewErrors?.length===1&&W.isBillConditionallyValid(e.reviewErrors[0].reviewErrorCode),subTitle:K(e.reviewStatus==="warning",e.reviewErrors?.map(c=>c.reviewInfoMessage)),additonalInfo:e.reviewErrors!=null&&e.reviewErrors.length>1?n.reviewPage.removeOrProceed:void 0},reviewStatus:{isLoading:r?!0:i,code:e.reviewErrors?.length===1&&e.reviewErrors[0].reviewErrorCode==="ERR_INSUFFICIENT_FUNDS"?"low-balance":e.reviewStatus??""}}))},C=t=>{const r=t.billsForReview;let i=[];return r.forEach(e=>{i=m.uniq([...i,e.isRecurring?"recurring":"one-time"])}),i},H=t=>{const{this_:r,these:i,bill:e,bills:c,payment:v,payments:a}=l.texts;return t>1?{title:n.popUps.reject.title.replace("<_payment_>",n.payments),description:n.popUps.reject.description.replaceAll("<_this_>",i).replaceAll("<_payment_>",a).replaceAll("<_bill_>",c)}:{title:n.popUps.reject.title.replace("<_payment_>",n.payment),description:n.popUps.reject.description.replaceAll("<_this_>",r).replaceAll("<_payment_>",v).replaceAll("<_bill_>",e)}},J=(t,r,i,e)=>{const{has:c,have:v,bill:a,bills:o,are:_,is:h,do_:d,does:b}=l.texts,S=r>1,s=i>1;let g="",p="";return t==="Completed"&&!e?(g=n.reviewPage.billsReviewed.title.replace("<_bill_>",s?I.bulkActions.bills:n.bill).replace("<_has_>",s?v:c),r===0?p=n.reviewPage.billsReviewed.descriptionError.replace("<_bill_>",s?o:a).replace("<_do_>",s?d:b):p=`${r}/${i} ${n.reviewPage.billsReviewed.description.replace("<_bill_>",i>1?o:a).replace("<_is_>",S?_:h)}`):(g=n.reviewPage.billsReviewing.title.replace("<_bill_>",s?o:a),p=n.reviewPage.billsReviewing.description.replace("<_bill_>",s?o:a)),{title:g,description:p}},K=(t,r)=>{if(r?.length!=null){if(r.length>1)return r.join(` ${l.strings.dividerDot} `);if(r.length===1)return t?r[0]+`${l.strings.colon} ${n.reviewPage.removeOrProceed}`:r[0]}return""};exports.default=G;exports.getBillsUniqueType=C;

package/dist/BoxItem-DH_lDowf.cjs

@@ -0,0 +1,53 @@
+"use strict";const i=require("./vendor-.pnpm-D0ILHvHB.cjs"),n=require("@emotion/styled"),r=require("./index-gTpRqqAW.cjs"),a=require("./commonDimensions-DgYPd8NC.cjs"),p=(e,o)=>o===1?"roundedBox":e===0?"topRoundedBox":e===o-1?"bottomRoundedBox":"box";function u({content:e,boxType:o,isDisabled:t=!1,isNotClickable:d=!1}){const s=r.useWindowSizeContext();switch(o??"roundedBox"){case"topRoundedBox":return i.jsxRuntimeExports.jsx(h,{isDisabled:t,windowSize:s,hideCursor:d,"data-testid":r.generateDataTestId("top-rounded-box",o),children:e});case"bottomRoundedBox":return i.jsxRuntimeExports.jsx(b,{isDisabled:t,windowSize:s,hideCursor:d,"data-testid":r.generateDataTestId("bottom-rounded-box",o),children:e});case"box":return i.jsxRuntimeExports.jsx(c,{isDisabled:t,windowSize:s,hideCursor:d,"data-testid":r.generateDataTestId("box",o),children:e});case"roundedBox":return i.jsxRuntimeExports.jsx(x,{isDisabled:t,windowSize:s,hideCursor:d,"data-testid":r.generateDataTestId("rounded-box",o),children:e})}}const x=n.div`
+  box-sizing: border-box;
+  cursor: ${e=>e.isDisabled||e.hideCursor===!0?"default":"pointer"};
+  min-height: ${e=>a.transactionItemDimensions.transactionItemHeightResponsive.valuePx(e.windowSize)};
+  display: flex;
+  border: 1px solid;
+  border-radius: ${r.Space.sp2};
+  background-color: ${e=>e.theme.colors.grey5};
+  border-color: ${e=>e.theme.colors.grey3};
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    border-color: ${e=>e.isDisabled?e.theme.colors.grey3:e.theme.colors.primary};
+    color: ${e=>e.isDisabled?e.theme.colors.hero:e.theme.colors.primary};
+  }
+`,h=n(x)`
+  display: flex;
+  border-top-width: 1px;
+  border-right-width: 1px;
+  border-bottom-width: 0.5px;
+  border-left-width: 1px;
+
+  border-top-left-radius: ${r.Space.sp2};
+  border-top-right-radius: ${r.Space.sp2};
+  border-bottom-left-radius: ${r.Space.sp0};
+  border-bottom-right-radius: ${r.Space.sp0};
+  &:hover {
+    border-bottom-width: 1px;
+  }
+`,b=n(x)`
+  display: flex;
+  border-top-width: 0.5px;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+  border-top-left-radius: ${r.Space.sp0};
+  border-top-right-radius: ${r.Space.sp0};
+  border-bottom-left-radius: ${r.Space.sp2};
+  border-bottom-right-radius: ${r.Space.sp2};
+  &:hover {
+    border-top-width: 1px;
+  }
+`,c=n(x)`
+  display: flex;
+  border-radius: ${r.Space.sp0};
+  border-top-width: 0.5px;
+  border-right-width: 1px;
+  border-bottom-width: 0.5px;
+  border-left-width: 1px;
+  &:hover {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+  }
+`;exports.BoxItem=u;exports.boxType=p;