@zeniai/web-components 3.16.91 → 3.16.92

package/dist/ChargeCardSetupPage-BZDidJV3.cjs

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./vendor-.pnpm-D0ILHvHB.cjs"),d=require("react"),y=require("@emotion/styled"),Te=require("@zeniai/client-epic-state"),e=require("./index-8M9nU4Oy.cjs"),Be=require("./LabeledControlledCheckBoxField-CfP3crcN.cjs"),ke=require("./UploadAdditionalDocumentOverlay-HQMMeRfc.cjs"),a={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]),subTitlePaddingBottom:new e.ResponsiveSized(e.sp[3],e.sp[3]),overlayWidth:new e.ResponsiveSized(100,100,59),checkBoxTop:new e.ResponsiveSized(e.sp[1],e.sp[0])},U="chargeCardSetUpPage",m="payAccount",{commonSetUp:Ee,spendManagement:De}=e.appLocale.getLocalizedStrings(),{chargeCard:G}=De,{chargeCardSetUp:p}=G,{setUp:z}=Ee,Oe=({autoPayThreshold:n,isDisabled:b,meetingUrl:P,isEarlyPayEnabled:f,chargeCardSetUpView:s,connectedAccountProvider:J,filesEndPoint:K,authParams:Q,isAccountsEnabled:X,isDebitCardOnlyEnabled:j,isCreditCardOnlyEnabled:Y,accountsPromoConfig:Z,onFetchLinkTokenClick:ee,onBackClick:te,onEnableChargeCardClick:ne,onUpdateChargeCardClick:oe,onBusinessVerificationSectionClick:ie,onUpdatePaymentAccountStatus:se,onUpdatePaymentAccountLoginStatus:ae,onUpdatePrimaryFundingAccount:ce,onUpdateAutoPayClick:re,onEstablishConnectionClick:le,onEstablishConnectionSuccess:ue,onClickMenuIcon:de,onEnableChargeCardSuccess:C,onEditFileName:pe,onDeleteFile:me,updateFilesEntity:fe,onCompanyOfficerUpdated:ge,onSendForVerificationClick:he,onSignUpClick:xe})=>{const g=t.useTheme(),i=e.useWindowSizeContext(),R=e.useToolkitContext().analytics,[v,h]=d.useState(!1),{fetchState:x,companyBillPayInfo:F,isRefreshingViewInBackground:Se,updateStatus:l,accountUpdateStatus:ye,plaidConnectionDetails:be,allBankAccounts:Ce,companyChargeCardInfo:T,companyDebitCardInfo:q,selectedCompanyOfficer:c,primaryFundingAccount:r,allFundingAccounts:_}=s,W=e.usePrevious(x),w=e.usePrevious(l.fetchState),B=t.useForm({mode:"all",reValidateMode:"onChange",defaultValues:d.useMemo(()=>M(s),[s]),values:M(s)}),ve=B.handleSubmit(ne),we=async(S,A)=>{const o=A[m];if(S.includes(m))if(S.includes("fundingAccount")){if(o.fundingAccount.selectedOption!=null&&r?.id!=o.fundingAccount.selectedOption){const u=_.find(I=>I.id===o.fundingAccount.selectedOption);u!=null&&ce(o.fundingAccount.selectedOption,u.accType)}}else if(o.account.selectedOption!=null&&r?.id!=null&&r?.zeniAccountId!=o.account.selectedOption){const u=o.account.allOptions.find(I=>I.value===o.account.selectedOption);u!=null&&typeof u.label=="string"&&R.trackConnectBankLink(u.value,u.label,"charge_cards"),oe(o.account.selectedOption,r.id,r.accType)}else S.includes("enableAutoPay")&&o.enableAutoPay!=null&&re(o.enableAutoPay)};d.useEffect(()=>{const S=B.watch((A,{name:o})=>{o!=null&&A!=null&&t.defer(()=>we(o,A))});return()=>{S.unsubscribe()}}),d.useEffect(()=>{!v&&c?.additionalDocumentTypesRequestedForVerification.includes("social_security_card")===!0&&c.areAdditionalDocumentsRequestedForVerification&&!c.areAdditionalDocumentsSubmittedForVerification&&c.userVerificationStatus?.code==="require_info"&&h(!0),v&&W==="In-Progress"&&x==="Completed"&&h(!1)},[c,x,W]),d.useEffect(()=>{w==="In-Progress"&&l.fetchState==="Completed"&&C()},[C,w,l.fetchState]);const k=T?.isChargeCardEnabled===!0,E=q?.isDebitCardEnabled===!0,$=q?.isDebitCardTOSAccepted===!0,L=T?.isChargeCardTOSAccepted===!0,N=F?.isBusinessVerified===!0,Ae=r?.accType==="depositAccount"||Te.isVerifiedPaymentAccountProviderStatusCode(r?.providerVerificationStatus?.code??""),D=j?N:N&&Ae,Pe=x==="In-Progress"||x==="Not-Started";d.useEffect(()=>{w==="In-Progress"&&l.fetchState==="Completed"&&C()},[C,w,l.fetchState]);const O=j?D&&!E&&$:Y?D&&!k&&L:D&&!(k&&E)&&L&&$,je=O?p.setupSubTitleNotEnabled:p.setupSubTitle,H=g.mode==="light"?new t.Color(g.colors.brandColorJadeLight):new t.Color(g.colors.brandColorJadeDark),Re=()=>{!v&&c?.additionalDocumentTypesRequestedForVerification.includes("social_security_card")===!0&&c.areAdditionalDocumentsRequestedForVerification&&!c.areAdditionalDocumentsSubmittedForVerification&&c.userVerificationStatus?.code==="require_info"?h(!0):ie?.()};return t.jsxRuntimeExports.jsxs(ze,{children:[t.jsxRuntimeExports.jsx(t.Drawer,{anchor:"right",PaperProps:{style:{width:a.overlayWidth.valuePercentage(i),boxShadow:"none"}},open:v,onClose:()=>h(!1),style:{backgroundColor:e.Colors.drawerBackground},transitionDuration:250,children:t.jsxRuntimeExports.jsx(ke.UploadAdditionalDocumentOVerlay,{authParams:Q,filesEndPoint:K,updateStatus:l,onEditFileName:pe,onDeleteFile:me,updateFilesEntity:fe,companyOfficer:c,onClose:()=>h(!1),onCompanyOfficerUpdated:ge,onSendForVerificationClick:he})}),t.jsxRuntimeExports.jsx(e.NavBar,{title:p.setupTitle,backgroundColor:g.colors.grey4,style:{zIndex:3},onBackClick:te,showMenuIcon:!k&&!E&&(i==="medium-compact"||i==="small"),onClickMenuIcon:de,source:"ChargeCardSetupPage"}),t.jsxRuntimeExports.jsxs(Ie,{windowSize:i,children:[t.jsxRuntimeExports.jsx(Ve,{windowSize:i,children:je}),Pe?t.jsxRuntimeExports.jsx(Fe,{children:t.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"ExtraLarge",start:!0})}):t.jsxRuntimeExports.jsx(t.FormProvider,{...B,children:t.jsxRuntimeExports.jsx("form",{id:V(U),onSubmit:ve,children:t.jsxRuntimeExports.jsxs(qe,{windowSize:i,children:[t.jsxRuntimeExports.jsx(e.SetUpDefaultSection,{onClick:Re,title:z.businessVerificationTitle,subTitle:z.businessVerificationSubTitle,header:z.businessVerificationHeader,icon:{element:t.jsxRuntimeExports.jsx(e.SvgDocuments,{width:a.iconWidthHeight.valuePx(i),height:a.iconWidthHeight.valuePx(i)}),color:H},status:F?.businessVerificationStatus,isLoading:Se,isActiveWhileLoading:!0}),j?null:t.jsxRuntimeExports.jsx(e.SpendMgmtSetupAccountSection,{connectedAccountProvider:J,primaryFundingAccount:r,allFundingAccounts:_,plaidConnectionDetails:be,allBankAccounts:Ce,sectionId:m,isDisabled:b,onFetchLinkTokenClick:ee,onEstablishConnectionClick:le,onUpdatePaymentAccountStatus:se,onUpdatePaymentAccountLoginStatus:ae,sectionTitle:p.setupAccountSectionTitle,onEstablishConnectionSuccess:ue,icon:{element:t.jsxRuntimeExports.jsx(e.SvgBankBuilding,{width:a.iconWidthHeight.valuePx(i),height:a.iconWidthHeight.valuePx(i)}),color:H},analytics:R,productType:"charge_cards",isAccountsEnabled:X,onSignUpClick:xe,pageName:p.pageName,accountsPromoConfig:Z,accountSelectContainerStyle:f?{marginBottom:"20px"}:{},bottomComponent:f&&t.jsxRuntimeExports.jsx(Be.LabeledControlledCheckBoxField,{label:{label:G.payEarly.enableAutoPay.replace("__autoPayThreshold__",n.toString()),style:{color:g.colors.primary,...e.textStyles.smallRegular.cssObject,alignItems:"center"}},style:{width:"unset",marginRight:e.Space.sp4,marginTop:e.Space.sp1,alignItems:i==="small"?"flex-start":"center"},checkBoxField:{name:e.uniqueName(m,"enableAutoPay"),checkBoxValue:e.uniqueName(m,"enableAutoPay"),defaultChecked:T?.isAutoPayEnabled,style:{top:a.checkBoxTop.valuePx(i)}}})})]})})})]}),O?t.jsxRuntimeExports.jsx(e.Footer,{formId:V(U),primaryBtn:{label:p.enableAccounts,style:{width:"auto",minWidth:i==="small"?"auto":"181px"},isLoading:l.fetchState==="In-Progress"||ye.fetchState==="In-Progress",isDisabled:b!=null},showCancel:!1,cancelBtn:{label:""},style:{padding:`12px ${e.Space.sp3}`}}):null,t.jsxRuntimeExports.jsx(e.HelpButton,{isFooterRendered:O,meetingUrl:P,analytics:R,productType:"charge_cards"})]})},M=n=>{const{allBankAccounts:b,allFundingAccounts:P,primaryFundingAccount:f}=n;return{[m]:{fundingAccount:{selectedOption:f?.id,allOptions:P.map(s=>({label:s.label,value:s.id,isRecommended:s.accType==="depositAccount"}))},account:{selectedOption:f?.zeniAccountId,allOptions:b.map(s=>({label:s.accountName,value:s.accountId}))},enableAutoPay:n.companyChargeCardInfo?.isAutoPayEnabled}}},V=n=>`${n}_form`,Ie=y.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+  row-gap: ${n=>a.setupDetailsRowGap.valuePx(n.windowSize)};
+`,ze=y.div`
+  display: flex;
+  min-height: 100%;
+  height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${n=>n.theme.colors.grey4};
+`,Ve=y(e.StandardRegular)`
+  color: ${n=>n.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${n=>a.titleWidth.valuePx(n.windowSize)};
+  padding-top: ${n=>a.subTitlePaddingTop.valuePx(n.windowSize)};
+  padding-bottom: ${n=>a.subTitlePaddingBottom.valuePx(n.windowSize)};
+  text-align: ${n=>n.windowSize==="small"?"initial":"center"};
+`,Fe=y.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 110px);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${n=>n.theme.colors.grey4};
+`,qe=y.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${n=>a.sectionRowGap.valuePx(n.windowSize)};
+`;exports.default=Oe;exports.uniqueName=V;

package/dist/ChargeCardSetupPage-MwUi4tc1.js

@@ -0,0 +1,359 @@
+import { u as Ve, g as Fe, h as Re, b as M, j as t, D as ze, F as _e } from "./vendor-.pnpm-B2klaOGU.js";
+import { useState as We, useMemo as $e, useEffect as v } from "react";
+import x from "@emotion/styled";
+import { isVerifiedPaymentAccountProviderStatusCode as Le } from "@zeniai/client-epic-state";
+import { u as He, dD as qe, aD as G, a as Ne, C as Ue, R as r, aE as Ee, A as Me, hI as Ge, go as Je, hJ as Ke, kb as J, S as z, t as Qe, eP as Xe, ao as Ye, hL as Ze, D as a, o as et } from "./index-B_vMG-7O.js";
+import { L as tt } from "./LabeledControlledCheckBoxField-BVxyX_6-.js";
+import { U as ot } from "./UploadAdditionalDocumentOverlay-CexRRuSv.js";
+const s = {
+  titleWidth: new r(343, 580, 726, 826),
+  setupDetailsRowGap: new r(12, a[5], a[5]),
+  sectionRowGap: new r(a[5], a[9], a[9]),
+  iconWidthHeight: new r(20, a[4]),
+  subTitlePaddingTop: new r(12, a[3]),
+  subTitlePaddingBottom: new r(a[3], a[3]),
+  overlayWidth: new r(100, 100, 59),
+  checkBoxTop: new r(a[1], a[0])
+}, K = "chargeCardSetUpPage", f = "payAccount", { commonSetUp: nt, spendManagement: it } = Ne.getLocalizedStrings(), { chargeCard: Y } = it, { chargeCardSetUp: p } = Y, { setUp: _ } = nt, St = ({
+  autoPayThreshold: e,
+  isDisabled: b,
+  meetingUrl: T,
+  isEarlyPayEnabled: h,
+  chargeCardSetUpView: i,
+  connectedAccountProvider: Z,
+  filesEndPoint: ee,
+  authParams: te,
+  isAccountsEnabled: oe,
+  isDebitCardOnlyEnabled: D,
+  isCreditCardOnlyEnabled: ne,
+  accountsPromoConfig: ie,
+  onFetchLinkTokenClick: ae,
+  onBackClick: se,
+  onEnableChargeCardClick: ce,
+  onUpdateChargeCardClick: le,
+  onBusinessVerificationSectionClick: re,
+  onUpdatePaymentAccountStatus: de,
+  onUpdatePaymentAccountLoginStatus: ue,
+  onUpdatePrimaryFundingAccount: pe,
+  onUpdateAutoPayClick: fe,
+  onEstablishConnectionClick: he,
+  onEstablishConnectionSuccess: ge,
+  onClickMenuIcon: me,
+  onEnableChargeCardSuccess: C,
+  onEditFileName: ye,
+  onDeleteFile: Se,
+  updateFilesEntity: xe,
+  onCompanyOfficerUpdated: be,
+  onSendForVerificationClick: Ce,
+  onSignUpClick: we
+}) => {
+  const g = Ve(), n = He(), B = qe().analytics, [w, m] = We(!1), {
+    fetchState: y,
+    companyBillPayInfo: W,
+    isRefreshingViewInBackground: Ae,
+    updateStatus: d,
+    accountUpdateStatus: Pe,
+    plaidConnectionDetails: ve,
+    allBankAccounts: Te,
+    companyChargeCardInfo: k,
+    companyDebitCardInfo: $,
+    selectedCompanyOfficer: c,
+    primaryFundingAccount: l,
+    allFundingAccounts: L
+  } = i, H = G(y), A = G(d.fetchState), j = Fe({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: $e(
+      () => Q(i),
+      [i]
+    ),
+    values: Q(i)
+  }), De = j.handleSubmit(ce), Be = async (S, P) => {
+    const o = P[f];
+    if (S.includes(f))
+      if (S.includes("fundingAccount")) {
+        if (o.fundingAccount.selectedOption != null && l?.id != o.fundingAccount.selectedOption) {
+          const u = L.find(
+            (R) => R.id === o.fundingAccount.selectedOption
+          );
+          u != null && pe(
+            o.fundingAccount.selectedOption,
+            u.accType
+          );
+        }
+      } else if (o.account.selectedOption != null && l?.id != null && l?.zeniAccountId != o.account.selectedOption) {
+        const u = o.account.allOptions.find(
+          (R) => R.value === o.account.selectedOption
+        );
+        u != null && typeof u.label == "string" && B.trackConnectBankLink(
+          u.value,
+          u.label,
+          "charge_cards"
+        ), le(
+          o.account.selectedOption,
+          l.id,
+          l.accType
+        );
+      } else S.includes("enableAutoPay") && o.enableAutoPay != null && fe(o.enableAutoPay);
+  };
+  v(() => {
+    const S = j.watch((P, { name: o }) => {
+      o != null && P != null && Re(() => Be(o, P));
+    });
+    return () => {
+      S.unsubscribe();
+    };
+  }), v(() => {
+    !w && c?.additionalDocumentTypesRequestedForVerification.includes(
+      "social_security_card"
+    ) === !0 && c.areAdditionalDocumentsRequestedForVerification && !c.areAdditionalDocumentsSubmittedForVerification && c.userVerificationStatus?.code === "require_info" && m(!0), w && H === "In-Progress" && y === "Completed" && m(!1);
+  }, [c, y, H]), v(() => {
+    A === "In-Progress" && d.fetchState === "Completed" && C();
+  }, [C, A, d.fetchState]);
+  const I = k?.isChargeCardEnabled === !0, O = $?.isDebitCardEnabled === !0, q = $?.isDebitCardTOSAccepted === !0, N = k?.isChargeCardTOSAccepted === !0, U = W?.isBusinessVerified === !0, ke = l?.accType === "depositAccount" || Le(
+    l?.providerVerificationStatus?.code ?? ""
+  ), V = D ? U : U && ke, je = y === "In-Progress" || y === "Not-Started";
+  v(() => {
+    A === "In-Progress" && d.fetchState === "Completed" && C();
+  }, [C, A, d.fetchState]);
+  const F = D ? V && !O && q : ne ? V && !I && N : V && !(I && O) && N && q, Ie = F ? p.setupSubTitleNotEnabled : p.setupSubTitle, E = g.mode === "light" ? new M(g.colors.brandColorJadeLight) : new M(g.colors.brandColorJadeDark), Oe = () => {
+    !w && c?.additionalDocumentTypesRequestedForVerification.includes(
+      "social_security_card"
+    ) === !0 && c.areAdditionalDocumentsRequestedForVerification && !c.areAdditionalDocumentsSubmittedForVerification && c.userVerificationStatus?.code === "require_info" ? m(!0) : re?.();
+  };
+  return /* @__PURE__ */ t.jsxs(st, { children: [
+    /* @__PURE__ */ t.jsx(
+      ze,
+      {
+        anchor: "right",
+        PaperProps: {
+          style: {
+            width: s.overlayWidth.valuePercentage(n),
+            boxShadow: "none"
+          }
+        },
+        open: w,
+        onClose: () => m(!1),
+        style: { backgroundColor: Ue.drawerBackground },
+        transitionDuration: 250,
+        children: /* @__PURE__ */ t.jsx(
+          ot,
+          {
+            authParams: te,
+            filesEndPoint: ee,
+            updateStatus: d,
+            onEditFileName: ye,
+            onDeleteFile: Se,
+            updateFilesEntity: xe,
+            companyOfficer: c,
+            onClose: () => m(!1),
+            onCompanyOfficerUpdated: be,
+            onSendForVerificationClick: Ce
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Ee,
+      {
+        title: p.setupTitle,
+        backgroundColor: g.colors.grey4,
+        style: { zIndex: 3 },
+        onBackClick: se,
+        showMenuIcon: !I && !O && (n === "medium-compact" || n === "small"),
+        onClickMenuIcon: me,
+        source: "ChargeCardSetupPage"
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(at, { windowSize: n, children: [
+      /* @__PURE__ */ t.jsx(ct, { windowSize: n, children: Ie }),
+      je ? /* @__PURE__ */ t.jsx(lt, { children: /* @__PURE__ */ t.jsx(Me, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ t.jsx(_e, { ...j, children: /* @__PURE__ */ t.jsx("form", { id: X(K), onSubmit: De, children: /* @__PURE__ */ t.jsxs(rt, { windowSize: n, children: [
+        /* @__PURE__ */ t.jsx(
+          Ge,
+          {
+            onClick: Oe,
+            title: _.businessVerificationTitle,
+            subTitle: _.businessVerificationSubTitle,
+            header: _.businessVerificationHeader,
+            icon: {
+              element: /* @__PURE__ */ t.jsx(
+                Je,
+                {
+                  width: s.iconWidthHeight.valuePx(n),
+                  height: s.iconWidthHeight.valuePx(n)
+                }
+              ),
+              color: E
+            },
+            status: W?.businessVerificationStatus,
+            isLoading: Ae,
+            isActiveWhileLoading: !0
+          }
+        ),
+        D ? null : /* @__PURE__ */ t.jsx(
+          Ke,
+          {
+            connectedAccountProvider: Z,
+            primaryFundingAccount: l,
+            allFundingAccounts: L,
+            plaidConnectionDetails: ve,
+            allBankAccounts: Te,
+            sectionId: f,
+            isDisabled: b,
+            onFetchLinkTokenClick: ae,
+            onEstablishConnectionClick: he,
+            onUpdatePaymentAccountStatus: de,
+            onUpdatePaymentAccountLoginStatus: ue,
+            sectionTitle: p.setupAccountSectionTitle,
+            onEstablishConnectionSuccess: ge,
+            icon: {
+              element: /* @__PURE__ */ t.jsx(
+                Xe,
+                {
+                  width: s.iconWidthHeight.valuePx(n),
+                  height: s.iconWidthHeight.valuePx(n)
+                }
+              ),
+              color: E
+            },
+            analytics: B,
+            productType: "charge_cards",
+            isAccountsEnabled: oe,
+            onSignUpClick: we,
+            pageName: p.pageName,
+            accountsPromoConfig: ie,
+            accountSelectContainerStyle: h ? {
+              marginBottom: "20px"
+            } : {},
+            bottomComponent: h && /* @__PURE__ */ t.jsx(
+              tt,
+              {
+                label: {
+                  label: Y.payEarly.enableAutoPay.replace(
+                    "__autoPayThreshold__",
+                    e.toString()
+                  ),
+                  style: {
+                    color: g.colors.primary,
+                    ...Qe.smallRegular.cssObject,
+                    alignItems: "center"
+                  }
+                },
+                style: {
+                  width: "unset",
+                  marginRight: z.sp4,
+                  marginTop: z.sp1,
+                  alignItems: n === "small" ? "flex-start" : "center"
+                },
+                checkBoxField: {
+                  name: J(
+                    f,
+                    "enableAutoPay"
+                  ),
+                  checkBoxValue: J(
+                    f,
+                    "enableAutoPay"
+                  ),
+                  defaultChecked: k?.isAutoPayEnabled,
+                  style: {
+                    top: s.checkBoxTop.valuePx(n)
+                  }
+                }
+              }
+            )
+          }
+        )
+      ] }) }) })
+    ] }),
+    F ? /* @__PURE__ */ t.jsx(
+      Ye,
+      {
+        formId: X(K),
+        primaryBtn: {
+          label: p.enableAccounts,
+          style: {
+            width: "auto",
+            minWidth: n === "small" ? "auto" : "181px"
+          },
+          isLoading: d.fetchState === "In-Progress" || Pe.fetchState === "In-Progress",
+          isDisabled: b != null
+        },
+        showCancel: !1,
+        cancelBtn: { label: "" },
+        style: {
+          padding: `12px ${z.sp3}`
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ t.jsx(
+      Ze,
+      {
+        isFooterRendered: F,
+        meetingUrl: T,
+        analytics: B,
+        productType: "charge_cards"
+      }
+    )
+  ] });
+}, Q = (e) => {
+  const { allBankAccounts: b, allFundingAccounts: T, primaryFundingAccount: h } = e;
+  return {
+    [f]: {
+      fundingAccount: {
+        selectedOption: h?.id,
+        allOptions: T.map((i) => ({
+          label: i.label,
+          value: i.id,
+          isRecommended: i.accType === "depositAccount"
+        }))
+      },
+      account: {
+        selectedOption: h?.zeniAccountId,
+        allOptions: b.map((i) => ({
+          label: i.accountName,
+          value: i.accountId
+        }))
+      },
+      enableAutoPay: e.companyChargeCardInfo?.isAutoPayEnabled
+    }
+  };
+}, X = (e) => `${e}_form`, at = x.div`
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+  row-gap: ${(e) => s.setupDetailsRowGap.valuePx(e.windowSize)};
+`, st = x.div`
+  display: flex;
+  min-height: 100%;
+  height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, ct = x(et)`
+  color: ${(e) => e.theme.colors.hero};
+  display: flex;
+  justify-content: center;
+  width: ${(e) => s.titleWidth.valuePx(e.windowSize)};
+  padding-top: ${(e) => s.subTitlePaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => s.subTitlePaddingBottom.valuePx(e.windowSize)};
+  text-align: ${(e) => e.windowSize === "small" ? "initial" : "center"};
+`, lt = x.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};
+`, rt = x.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${(e) => s.sectionRowGap.valuePx(e.windowSize)};
+`;
+export {
+  St as default,
+  X as uniqueName
+};

package/dist/ChargeCardStatementsPage-52hvPi6H.cjs

@@ -0,0 +1,60 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),i=require("@emotion/styled"),e=require("./index-8M9nU4Oy.cjs"),L=require("./BoxItem-CA7rg0qT.cjs"),B=require("react"),N=require("./downloadPdf-Dc6tQrZe.cjs"),z=e.appLocale.getLocalizedStrings().months,M={downloadButtonSize:new e.ResponsiveSized(e.sp[4],20)},q=i.div`
+  display: flex;
+  padding: ${e.Space.sp3} ${e.Space.sp4};
+  flex-direction: row;
+  width: 100%;
+`,D=i.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`,W=i(e.StandardRegular)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  max-height: ${e.Space.sp11};
+  text-overflow: ellipsis;
+  word-break: break-word;
+  text-align: left;
+  overflow: hidden;
+`,O=i.div`
+  cursor: pointer;
+`,A=i(e.SvgDownload)`
+  width: ${t=>M.downloadButtonSize.valuePx(t.windowSize)};
+  height: ${t=>M.downloadButtonSize.valuePx(t.windowSize)};
+  min-height: ${t=>M.downloadButtonSize.valuePx(t.windowSize)};
+  color: ${t=>t.theme.colors.grey1};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+  }
+`;function _({currentTenantCompanyName:t,data:r,index:s,controllerEmails:c,isDebitCardFeatureEnabled:x,isDebitCardSetupEnabled:n,chargeCardCashbackDetailState:a,depositAccountListWithDebitCardIssued:d,debitCardSummary:w,productInformation:f,creditAccountInformation:j,debitAccountInformation:y,cashbackInformation:h,creditAccountRepayment:C,authParams:R,downloadEndPoint:v,boxType:P}){const b=e.useToolkitContext().analytics,[E,m]=B.useState(!1),Y=e.useWindowSizeContext(),u=z[r.monthYearPeriod.month-1],l=`${t}-Credit-Card-Monthly-Statement-${z[r.monthYearPeriod.month-1]}-${r.monthYearPeriod.year}.pdf`,p={period:`${r.monthYearPeriod.year}-${e.toMonthStr(r.monthYearPeriod.month)}`,format:"pdf"},g=o.jsxRuntimeExports.jsx(q,{children:o.jsxRuntimeExports.jsxs(D,{children:[o.jsxRuntimeExports.jsx(W,{children:u}),o.jsxRuntimeExports.jsx(O,{"data-testid":e.generateDataTestId("download-card-statement"),onClick:()=>{a.fetchState==="Completed"&&C.fetchState==="Completed"&&(!(x&&n)||d.fetchState==="Completed"&&w?.fetchState==="Completed")&&h!=null&&b.trackCardsDownloadClick(c,f,h,{fileCategory:"Credit Card Statement",fileType:"pdf",fileName:l,fileMonthYear:`${z[r.monthYearPeriod.month-1]} ${r.monthYearPeriod.year}`},"Credit Card Statements",s+1,j,y),N.downloadPdf(`${v}/statements?query=${encodeURIComponent(JSON.stringify(p))}`,l,R,m)},children:E?o.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"Small",start:!0}):o.jsxRuntimeExports.jsx(A,{windowSize:Y})})]})});return o.jsxRuntimeExports.jsx(L.BoxItem,{content:g,boxType:P,isDisabled:!1,isNotClickable:!0})}const T=e.appLocale.getLocalizedStrings().spendManagement.chargeCard.statements,S={listItemMarginLeftRight:new e.ResponsiveSized(e.sp[3],e.sp[8]),containerMarginTop:new e.ResponsiveSized(e.sp[0],e.sp[2]),titleMarginLeftRight:new e.ResponsiveSized(e.sp[3],e.sp[8])},F=({currentTenantCompanyName:t,authParams:r,controllerEmails:s,productInformation:c,cashbackInformation:x,creditAccountInformation:n,debitAccountInformation:a,isChargeCardFeatureEnabled:d,isDebitCardFeatureEnabled:w,isDebitCardSetupEnabled:f,isChargeCardSetupEnabled:j,chargeCardCashbackDetailState:y,depositAccountListWithDebitCardIssued:h,creditAccountRepayment:C,debitCardSummary:R,creditAccount:v,downloadEndPoint:P,statementListView:$,onBackClick:b})=>{const E=o.useTheme(),m=e.useWindowSizeContext(),{sortedYear:Y,monthsByYearWithSortedMonth:u}=Z($.statements);return o.jsxRuntimeExports.jsxs(K,{children:[o.jsxRuntimeExports.jsx(e.NavBar,{title:T.title,backgroundColor:E.colors.grey4,style:{zIndex:3},onBackClick:b,source:"ChargeCardStatementsPage"}),o.jsxRuntimeExports.jsx(X,{windowSize:m,children:$.statements.length===0?o.jsxRuntimeExports.jsx(k,{children:o.jsxRuntimeExports.jsx(H,{children:o.jsxRuntimeExports.jsx(I,{windowSize:m,children:o.jsxRuntimeExports.jsx(Q,{children:T.noStatements})})})}):o.jsxRuntimeExports.jsx(J,{children:Y.map(l=>o.jsxRuntimeExports.jsxs(U,{children:[o.jsxRuntimeExports.jsx(G,{windowSize:m,children:l}),o.jsxRuntimeExports.jsx(k,{children:u[l].map((p,g)=>o.jsxRuntimeExports.jsx(I,{windowSize:m,children:o.jsxRuntimeExports.jsx(_,{productInformation:c,creditAccountInformation:n,debitAccountInformation:a,cashbackInformation:x,creditAccountRepayment:C,depositAccountListWithDebitCardIssued:h,debitCardSummary:R,controllerEmails:s,isChargeCardFeatureEnabled:d,isDebitCardFeatureEnabled:w,isDebitCardSetupEnabled:f,isChargeCardSetupEnabled:j,chargeCardCashbackDetailState:y,creditAccount:v,currentTenantCompanyName:t,index:g,data:p,authParams:r,downloadEndPoint:P,boxType:L.boxType(g,u[l].length)},p.id)},p.id))})]},l))})})]})},J=i.div``,U=i.div`
+  margin-bottom: ${e.Space.sp6};
+`,k=i.div``,G=i(e.LargeMedium)`
+  margin-left: ${t=>S.titleMarginLeftRight.valuePx(t.windowSize)};
+  margin-bottom: ${e.Space.sp3};
+`,I=i.div`
+  margin-left: ${t=>S.listItemMarginLeftRight.valuePx(t.windowSize)};
+  margin-right: ${t=>S.listItemMarginLeftRight.valuePx(t.windowSize)};
+`,H=i.div`
+  display: flex;
+  height: 100%;
+  flex: 1 1 auto;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+`,K=i.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: ${e.Space.sp7};
+`,Q=i(e.StandardRegular)`
+  display: flex;
+  color: ${t=>t.theme.colors.grey2};
+`,X=i.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin-top: ${t=>S.containerMarginTop.valuePx(t.windowSize)};
+`,Z=t=>{const r=t.map(n=>{const[a,d]=n.period.split("-");return{id:n.id,monthYearPeriod:{year:parseInt(a),month:parseInt(d)}}}),s={};r.forEach(n=>{s[n.monthYearPeriod.year]!=null?s[n.monthYearPeriod.year].push(n):s[n.monthYearPeriod.year]=[n]});const c={};return Object.keys(s).forEach(n=>{c[Number(n)]=s[Number(n)].sort((a,d)=>d.monthYearPeriod.month-a.monthYearPeriod.month)}),{sortedYear:Object.keys(s).sort((n,a)=>Number(a)-Number(n)).map(n=>Number(n)),monthsByYearWithSortedMonth:c}};exports.default=F;