@zeniai/web-components 3.16.66 → 3.16.67

package/dist/PaymentAccountSetupBillingAddressSection-CkKm2TJE.cjs

@@ -0,0 +1,106 @@
+"use strict";const s=require("./vendor-.pnpm-CT-Z_-kn.cjs"),d=require("react"),r=require("@emotion/styled"),f=require("@stripe/react-stripe-js"),Y=require("@stripe/stripe-js"),e=require("./index-BK4xD0JT.cjs");require("@zeniai/client-epic-state");const V=require("./SetUpAccountSection-CTFnaQ-d.cjs"),ee={containerHeight:new e.ResponsiveSized(656,720),labelWidth:new e.ResponsiveSized(e.sp[12],90)},te=r.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: ${t=>t.windowSize==="small"?"90%":"544px"};
+  margin: 0 auto;
+  justify-content: center;
+  box-shadow: ${e.Colors.Elevation2Dark};
+  border-radius: ${e.Space.sp2};
+`,se=r.form`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${e.Space.sp2};
+`,oe=r(e.H6Medium)`
+  padding-top: ${e.Space.sp4};
+  text-align: center;
+  color: ${t=>t.theme.colors.primary};
+`,re=r(e.StandardRegular)`
+  color: ${t=>t.theme.colors.hero};
+  text-align: center;
+`,ae=r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  max-height: ${t=>ee.containerHeight.valuePx(t.windowSize)};
+  width: ${t=>t.windowSize==="small"?"90%":"544px"};
+
+  .InputContainer input {
+    margin-left: ${e.Space.sp1};
+  }
+`,ne=r.label`
+  width: 71px;
+  margin: auto;
+  margin-left: ${e.Space.sp2};
+`,ie=r.label`
+  width: 38px;
+  margin: auto;
+  margin-left: ${e.Space.sp4};
+`,ce=r.div`
+  width: 432px;
+  height: ${e.Space.sp8};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: ${t=>t.theme.colors.grey5};
+  margin-top: ${e.Space.sp3};
+  margin-bottom: ${e.Space.sp6};
+  border-radius: ${e.Space.sp2};
+`,le=r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: ${e.Space.sp8};
+  border-right: 1px solid ${t=>t.theme.colors.grey3};
+`,pe=r.label`
+  width: 257px;
+  margin: auto;
+`,de=r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  color: ${t=>t.theme.colors.grey1};
+  height: ${e.Space.sp8};
+  border-right: 1px solid ${t=>t.theme.colors.grey3};
+`,me=r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: ${e.Space.sp8};
+`,O=r.span`
+  height: ${e.Space.sp8};
+  display: none;
+`,G=r(e.StandardRegular)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  color: ${e.Colors.important};
+  width: 434px;
+  text-align: center;
+`,{cardPayment:c,common:{footer:J}}=e.appLocale.getLocalizedStrings(),ge=r(e.ExtraSmallRegular)`
+  color: ${t=>t.theme.colors.hero};
+  text-align: center;
+  margin-top: ${e.Space.sp2};
+`,Z=t=>`${t}_form`,K="CardPaymentPaymentForm",ue=({cardPaymentView:t,clientSecret:a,cardSetupInProgress:m,handleConfirmCardSetupIntent:n,updateCardPaymentModalState:b,handleAddCardPaymentSource:l,setCardSetupInProgress:g})=>{const y=f.useStripe(),i=f.useElements(),[p,u]=d.useState(!1),[v,L]=d.useState(!1),[E,C]=d.useState(!1),[h,j]=d.useState(!1),z=e.useWindowSizeContext(),I=t.cardSetupConfirmStatus.fetchState,k=t.addCardPaymentSourceStatus.fetchState,B=t.cardSetupIntentStatus.fetchState,[w,x]=d.useState(!1),M=async S=>{if(S.preventDefault(),!y||!i)return;const R=i.getElement(f.CardNumberElement),A=i.getElement(f.CardExpiryElement),P=i.getElement(f.CardCvcElement);(!R||!A||!P)&&x(!0),j(!0),g(!0),R!=null&&A!=null&&P!=null&&y.confirmCardSetup(a,{payment_method:{card:R}}).then($=>{j(!1),n($),$.setupIntent?.id!=null&&l("card","payment_intent",$.setupIntent?.id)}).catch(()=>{j(!1),setTimeout(()=>{g(!1)},2e3)})},U=s.useTheme(),_={showIcon:!0,style:{base:{...e.textStyles.standardRegular.cssObject,color:U.colors.primary,"::placeholder":{color:U.colors.grey2}},invalid:{color:e.Colors.important,iconColor:e.Colors.important}}},D=I==="In-Progress"||k==="In-Progress"||B==="In-Progress"||h===!0||m===!0,W=p||v||E||I==="In-Progress"||k==="In-Progress"||B==="In-Progress"||h===!0||m===!0;return s.jsxRuntimeExports.jsx(ae,{windowSize:z,children:s.jsxRuntimeExports.jsxs(se,{onSubmit:M,id:Z(K),children:[s.jsxRuntimeExports.jsxs(ce,{children:[s.jsxRuntimeExports.jsx(le,{children:s.jsxRuntimeExports.jsx(pe,{children:s.jsxRuntimeExports.jsx(f.CardNumberElement,{options:_,onChange:S=>u(!!S.error)})})}),s.jsxRuntimeExports.jsx(de,{children:s.jsxRuntimeExports.jsxs(ne,{children:[s.jsxRuntimeExports.jsx(O,{children:c.cardNumber}),s.jsxRuntimeExports.jsx(f.CardExpiryElement,{options:_,onChange:S=>L(!!S.error)})]})}),s.jsxRuntimeExports.jsx(me,{children:s.jsxRuntimeExports.jsxs(ie,{children:[s.jsxRuntimeExports.jsx(O,{children:c.CVC}),s.jsxRuntimeExports.jsx(f.CardCvcElement,{options:_,onChange:S=>C(!!S.error)})]})})]}),t.cardSetupConfirmStatus.error||w?s.jsxRuntimeExports.jsx(G,{children:c.errorMsg}):null,s.jsxRuntimeExports.jsx(e.Footer,{style:{width:"100%",padding:`${e.Space.sp3} 0 0 0`,borderTop:"none",position:"inherit"},formId:Z(K),primaryBtn:{label:J.linkCard,style:{width:"104px",height:e.Space.sp6},isLoading:D,isDisabled:W,type:"submit"},cancelBtn:{label:J.cancel,style:{width:"104px",height:e.Space.sp6},onClick:()=>{b(!1)}}}),s.jsxRuntimeExports.jsxs(ge,{windowSize:z,children:[c.terms.term1,s.jsxRuntimeExports.jsx(e.ZeniLink,{href:c.terms.term2Link,linkText:c.terms.term2}),c.terms.term3,s.jsxRuntimeExports.jsx(e.ZeniLink,{href:c.terms.term4Link,linkText:c.terms.term4})]})]})})},he=({isCardPaymentOpen:t,cardPaymentView:a,stripeKey:m,cardSetupInProgress:n,handleConfirmCardSetupIntent:b,updateCardPaymentModalState:l,handleCreateCardSetupIntent:g,handleAddCardPaymentSource:y,handleResetCardPaymentErrorStatuses:i,setCardSetupInProgress:p})=>{const[u,v]=d.useState(""),L=Y.loadStripe(m),E=e.usePrevious(a.addCardPaymentSourceStatus.fetchState),C=a.addCardPaymentSourceStatus.fetchState;d.useEffect(()=>(g(["card"]),()=>{l(!1),v(""),i()}),[]),d.useEffect(()=>{i()},[t]),d.useEffect(()=>{E==="In-Progress"&&C==="Error"?(p(!1),setTimeout(()=>{l(!1)},2e3)):E==="In-Progress"&&C==="Completed"&&(g(["card"]),setTimeout(()=>{l(!1),p(!1)},2e3))},[E,C]),d.useEffect(()=>{(a.cardSetupConfirmStatus.error||a.addCardPaymentSourceStatus.error)&&(g(["card"]),setTimeout(()=>{p(!1)},2e3))},[a.cardSetupConfirmStatus.error,a.addCardPaymentSourceStatus.error]),d.useEffect(()=>{a.clientSecret!=null&&v(a.clientSecret)},[a.clientSecret]);const h={theme:"stripe",variables:{borderRadius:e.Space.sp1,fontSizeBase:e.textStyles.standardRegular.fontSize,fontFamily:e.textStyles.standardRegular.fontFamily},rules:{".Input":{border:`1px solid ${e.Colors.neutralGrey3Light}`,borderRadius:e.Space.sp1,padding:"10px",fontSize:e.textStyles.standardRegular.fontSize}}},j={clientSecret:u,appearance:h},z=e.useWindowSizeContext();return s.jsxRuntimeExports.jsx(e.Modal,{open:t,children:s.jsxRuntimeExports.jsxs(te,{windowSize:z,isError:!!a.cardSetupConfirmStatus.error,children:[s.jsxRuntimeExports.jsx(oe,{children:c.title}),s.jsxRuntimeExports.jsx(re,{children:c.subtitle}),u&&L!=null?s.jsxRuntimeExports.jsx(f.Elements,{options:j,stripe:L,children:s.jsxRuntimeExports.jsx(ue,{clientSecret:u,handleConfirmCardSetupIntent:b,updateCardPaymentModalState:l,handleAddCardPaymentSource:y,cardPaymentView:a,cardSetupInProgress:n,setCardSetupInProgress:p})}):s.jsxRuntimeExports.jsx(G,{children:c.errorMsg})]})})},{cardBrands:o}=e.appLocale.getLocalizedStrings().cardPayment,N={visa:{name:o.visa,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/visa.svg"},mastercard:{name:o.mastercard,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/mastercard.svg"},american_express:{name:o.american_express,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/amex.svg"},discover:{name:o.discover,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/discover-global.svg"},jcb:{name:o.jcb,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/jcb-card.svg"},diners_club:{name:o.diners_club,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/dinersclub.svg"},unionpay:{name:o.unionpay,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},rupay:{name:o.rupay,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/rupay-card.svg"},bancontact:{name:o.bancontact,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},cmr_falabella:{name:o.cmr_falabella,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},tarjeta_naranja:{name:o.tarjeta_naranja,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},nativa:{name:o.nativa,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},cencosud:{name:o.cencosud,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},cabal:{name:o.cabal,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},argencard:{name:o.argencard,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},elo:{name:o.elo,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/elo-card.svg"},hipercard:{name:o.hipercard,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/hipercard.svg"},carnet:{name:o.carnet,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/carnet.svg"},maestro:{name:o.maestro,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/maestro.svg"},not_applicable:{name:o.not_applicable,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},eftpos_australia:{name:o.eftpos_australia,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},girocard:{name:o.girocard,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},other:{name:o.other,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},unknown:{name:o.unknown,iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"}},T={sectionWidth:new e.ResponsiveSized(343,580,726),iconWidthHeight:new e.ResponsiveSized(20,e.sp[4])},xe={title:new e.ResponsiveSizedStyle("standardSemiBold","largeSemiBold")},F=t=>t?N[t]??{name:"Other",iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"}:{name:"Other",iconURL:"https://storage.googleapis.com/zeni-apis.appspot.com/images/other-brand.svg"},Q=(t,a,m,n)=>({header:t,title:`${e.capitaliseWords(N[n.cardsList[0]?.brand]?.name??"")} ${a}`,subtitle:`${e.capitaliseWords(N[n.cardsList[0]?.brand]?.name??"")} ${m} ${n.cardsList[0]?.last4}`,status:n.cardsList[0]?.status}),Se=r.img`
+  width: ${t=>t.width}px;
+  height: ${t=>t.height}px;
+`,fe=({paymentAccount:t,plaidConnectionDetails:a,connectedAccountProvider:m,sectionId:n,isDisabled:b,hasError:l=!1,isValid:g,style:y,analytics:i,onFetchLinkTokenClick:p,onEstablishConnectionClick:u,onUpdatePaymentAccountStatus:v,onUpdatePaymentAccountLoginStatus:L,onEstablishConnectionSuccess:E,updateCardPaymentModalState:C,cardPaymentView:h,resetCardPaymentViewState:j,cardSetupInProgress:z=!1,googleAPIKey:I,subscriptionBillingAddress:k,subscriptionBillingAddressSectionId:B})=>{const w=s.useTheme(),x=e.useWindowSizeContext(),{register:M}=s.useFormContext(),U=w.mode==="light"?new s.Color(w.colors.brandColorJadeLight):new s.Color(w.colors.brandColorJadeDark),{common:_,customerOnboardingPage:{sections:{link_payment_account:{title:D,text:W,subText:S},card_payment_method:R}}}=e.appLocale.getLocalizedStrings(),A=h.cardsList.length>0,P=h.cardsList[0]?.brand??"other",$=h.addCardPaymentSourceStatus.fetchState,H=Q(R.header,R.titleText,R.protectedCardNo,h);let q;return A&&(q={header:H.header,title:H.title,subtitle:H.subtitle,status:H.status==="valid"?{name:"Verified",code:"verified"}:{name:"Pending",code:"pending"},showAddPaymentMethodDropDown:A===!0,icon:{element:s.jsxRuntimeExports.jsx(Se,{src:F(P).iconURL,width:T.iconWidthHeight.valuePx(x),height:T.iconWidthHeight.valuePx(x),alt:F(P).name,loading:"lazy"}),color:new s.Color(U)},showCompletedIcon:!1,isError:$==="Error",isLoading:$==="In-Progress",isCompleted:!0,showRightArrow:!1}),s.jsxRuntimeExports.jsxs(ye,{windowSize:x,children:[s.jsxRuntimeExports.jsx(Ee,{type:"hidden",...M(`${n}.connected`,{validate:X=>l?X==="true":!0}),value:g?"true":"false"}),s.jsxRuntimeExports.jsx(V.SetUpAccountSection,{connectedAccountProvider:m,paymentAccount:t,plaidConnectionDetails:a,allBankAccounts:[],header:D,sectionTitle:D,defaultSectionTitle:W,defaultSectionSubTitle:S,sectionId:n,isDisabled:b,hasError:l,showZeniAccountSection:!1,isCompleted:t?.providerVerificationStatus?.code?.includes("verified")===!0&&t?.isLoginRequired===!1,showCompletedIcon:x==="small",onFetchLinkTokenClick:p,onEstablishConnectionClick:u,onUpdatePaymentAccountStatus:v,onUpdatePaymentAccountLoginStatus:L,onEstablishConnectionSuccess:E,style:y,icon:{element:s.jsxRuntimeExports.jsx(e.SvgBankBuilding,{width:T.iconWidthHeight.valuePx(x),height:T.iconWidthHeight.valuePx(x)}),color:U},analytics:i,productType:"onboarding",resetCardPaymentViewState:j,cardPaymentSectionValues:q,cardPaymentView:h,updateCardPaymentModalState:C,referrer:"Onboarding",cardSetupInProgress:z}),be(x,_.headers.billingAddress,B,i,k,I,b)]})},be=(t,a,m,n,b,l,g)=>{const y={"Add street address":"street_address","Add suite":"suite","Add city":"city","Add state":"state","Select country":"country","Add ZIP code":"zip_code","Add secondary info":"secondary_info"};return s.jsxRuntimeExports.jsxs(je,{children:[s.jsxRuntimeExports.jsx(Ce,{windowSize:t,isDisabled:g==="disabled",children:a}),s.jsxRuntimeExports.jsx(e.AddressSection,{googleAPIKey:l??"",addressToEdit:b,sectionId:`${m}`,style:{marginLeft:"0px"},elementsStyle:{paddingRight:"0px"},onFormFieldClick:i=>{if(i.target instanceof HTMLInputElement){const{placeholder:p}=i.target;if(p){const u=y[p];u&&n.trackOnboardingBillingAddress(u)}}}})]})},ye=r.div`
+  display: flex;
+  flex-direction: column;
+  width: ${t=>T.sectionWidth.valuePx(t.windowSize)};
+  padding-bottom: ${e.Space.sp3};
+`,Ee=r.input`
+  display: none;
+`,Ce=r.div`
+  ${t=>`${xe.title.style(t.windowSize)}`};
+  margin-bottom: ${e.Space.sp3};
+  margin-top: ${e.Space.sp3};
+  color: ${t=>t.isError===!0?e.Colors.important:t.isDisabled===!0?t.theme.colors.grey1:t.theme.colors.primary};
+`,je=r.div`
+  margin-top: ${e.Space.sp5};
+  margin-bottom: ${e.Space.sp4};
+`;exports.CardPaymentModal=he;exports.PaymentAccountSetupBillingAddressSection=fe;exports.cardPaymentMethodValues=Q;exports.getCardBrandIconUrl=F;