@clerk/clerk-js
Version:
Clerk JS library
9 lines • 29.3 kB
JavaScript
;(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["237"],{670:function(e,t,r){r.r(t),r.d(t,{Checkout:()=>U});var o=r(9109),i=r(1102),n=r(1576),a=r(4204),l=r(3799),c=r(9144),s=r(8e3),d=r(9082),u=r(3003),m=r(2464),p=r(4676);let h=e=>e[0].toUpperCase()+e.slice(1),f=(e,t,r)=>e+(t-e)*r,y=()=>{let e=(0,p.useRouter)(),{setIsOpen:t}=(0,i.useDrawerContext)(),{newSubscriptionRedirectUrl:r}=(0,n.useCheckoutContext)(),{checkout:y}=(0,l.z4)(),{totals:g,paymentSource:x,planPeriodStart:b}=y,[$,Z]=(0,c.useState)({x:256,y:256}),[S,B]=(0,c.useState)({x:256,y:256}),k=(0,c.useId)(),w=(0,c.useId)(),v=(0,c.useId)(),z=(0,m.Tb)(),{animations:D}=(0,a.useAppearance)().parsedLayout,_=!z&&!0===D,C=(0,c.useRef)(null),K=(0,c.useRef)(null),P="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;return((0,c.useEffect)(()=>{if(!P)return;let e=()=>{B(e=>({x:f(e.x,$.x,.15),y:f(e.y,$.y,.15)})),C.current=requestAnimationFrame(e)};return C.current=requestAnimationFrame(e),()=>{C.current&&cancelAnimationFrame(C.current)}},[$,P]),g)?(0,o.BX)(o.HY,{children:[(0,o.tZ)(i.Drawer.Body,{children:(0,o.BX)(a.Span,{elementDescriptor:a.descriptors.checkoutSuccessRoot,sx:e=>({"--ring-fill":e.colors.$neutralAlpha200,"--ring-highlight":e.colors.$success500,margin:"auto",position:"relative",aspectRatio:"1/1",display:"grid",width:"100%",flexShrink:0,transformOrigin:"bottom center",animationName:"scaleIn",animationDuration:`${u.bf.slowest}ms`,animationTimingFunction:u.$$.bezier,animationFillMode:"forwards",opacity:0,overflow:"hidden",backgroundColor:e.colors.$colorBackground,"@keyframes scaleIn":{"0%":{filter:"blur(10px)",transform:"scale(0.85)",opacity:0},"100%":{filter:"blur(0px)",transform:"scale(1)",opacity:1}},...!_&&{animation:"none",opacity:1}}),ref:K,onMouseMove:e=>{if(P&&K.current){let t=K.current.getBoundingClientRect(),r=e.clientX-t.left,o=e.clientY-t.top,i=t.width;i>0?Z({x:r/i*512,y:o/i*512}):Z({x:256,y:256})}},children:[(0,o.BX)(a.Box,{elementDescriptor:a.descriptors.checkoutSuccessRings,as:"svg",viewBox:"0 0 512 512",sx:{position:"absolute",inset:0,pointerEvents:"none"},"aria-hidden":!0,children:[(0,o.BX)("defs",{children:[(0,o.BX)("radialGradient",{id:"clerk-checkout-success-gradient",children:[(0,o.tZ)("stop",{offset:"0%",style:{stopColor:"var(--ring-highlight)"}}),(0,o.tZ)("stop",{offset:"100%",stopOpacity:"0",style:{stopColor:"var(--ring-highlight)"}})]}),(0,o.tZ)("filter",{id:"clerk-checkout-success-blur-effect",children:(0,o.tZ)("feGaussianBlur",{stdDeviation:"10"})}),[{r:225,maskStart:10,maskEnd:90,id:k},{r:162.5,maskStart:15,maskEnd:85,id:w},{r:100,maskStart:20,maskEnd:80,id:v}].map(({maskStart:e,maskEnd:t,id:r})=>(0,o.BX)("linearGradient",{id:`gradient-${r}`,x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[(0,o.tZ)("stop",{offset:`${e+5}%`,stopColor:"white",stopOpacity:"0"}),(0,o.tZ)("stop",{offset:`${e+35}%`,stopColor:"white",stopOpacity:"1"}),(0,o.tZ)("stop",{offset:`${t-35}%`,stopColor:"white",stopOpacity:"1"}),(0,o.tZ)("stop",{offset:`${t-5}%`,stopColor:"white",stopOpacity:"0"})]},r)),(0,o.tZ)("mask",{id:"clerk-checkout-success-mask",children:[{r:225,id:k},{r:162.5,id:w},{r:100,id:v}].map(({r:e,id:t})=>(0,o.tZ)("circle",{cx:"256",cy:"256",r:e,stroke:`url(#gradient-${t})`,fill:"none",strokeWidth:"1"},t))})]}),(0,o.BX)("g",{mask:"url(#clerk-checkout-success-mask)",children:[(0,o.tZ)("rect",{width:"512",height:"512",style:{fill:"var(--ring-fill)"}}),P&&(0,o.tZ)("rect",{id:"movingGradientHighlight",width:"256",height:"256",x:S.x-128,y:S.y-128,fill:"url(#clerk-checkout-success-gradient)",filter:"url(#clerk-checkout-success-blur-effect)"})]})]}),(0,o.BX)(a.Box,{elementDescriptor:a.descriptors.checkoutSuccessBadge,sx:e=>({margin:"auto",gridArea:"1/1",display:"flex",position:"relative",width:e.sizes.$16,height:e.sizes.$16,borderRadius:e.radii.$circle,backgroundImage:"linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.30) 95.31%)",boxShadow:"0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset",color:P?e.colors.$success500:e.colors.$colorForeground,":before":{content:'""',position:"absolute",inset:e.space.$1,borderRadius:e.radii.$circle,backgroundColor:e.colors.$colorBackground}}),children:[(0,o.tZ)("svg",{fill:"none",viewBox:"0 0 10 10","aria-hidden":"true",style:{position:"relative",margin:"auto",width:"1rem",height:"1rem"},children:(0,o.tZ)("path",{d:"m1 6 3 3 5-8",stroke:"currentColor",strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:"1",pathLength:"1",style:{strokeDashoffset:"1",animation:_?`check ${u.bf.drawer}ms ${u.$$.bezier} forwards ${u.bf.slow}ms`:"none",...!_&&{strokeDashoffset:"0"}}})}),(0,o.tZ)("style",{children:`
@keyframes check {
0% {
stroke-dashoffset: 1;
}
100% {
stroke-dashoffset: 0;
}
`})]}),(0,o.BX)(a.Span,{sx:e=>({margin:"auto",gridArea:"1/1",position:"relative",textAlign:"center",transform:`translateY(${e.space.$20})`}),children:[(0,o.tZ)(a.Heading,{elementDescriptor:a.descriptors.checkoutSuccessTitle,as:"h2",textVariant:"h2",localizationKey:g.totalDueNow.amount>0?(0,a.localizationKeys)("commerce.checkout.title__paymentSuccessful"):(0,a.localizationKeys)("commerce.checkout.title__subscriptionSuccessful"),sx:e=>({opacity:0,animationName:"slideUp",animationDuration:`${u.bf.slowest}ms`,animationTimingFunction:u.$$.bezier,animationFillMode:"forwards",color:e.colors.$colorForeground,"@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!_&&{opacity:1,animation:"none"}})}),(0,o.tZ)(a.Text,{elementDescriptor:a.descriptors.checkoutSuccessDescription,colorScheme:"secondary",sx:e=>({textAlign:"center",paddingInline:e.space.$8,marginBlockStart:e.space.$2,opacity:0,animationName:"slideUp",animationDuration:`${1.5*u.bf.slowest}ms`,animationTimingFunction:u.$$.bezier,animationFillMode:"forwards","@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!_&&{opacity:1,animation:"none"}}),localizationKey:g.totalDueNow.amount>0?(0,a.localizationKeys)("commerce.checkout.description__paymentSuccessful"):(0,a.localizationKeys)("commerce.checkout.description__subscriptionSuccessful")})]})]})}),(0,o.BX)(i.Drawer.Footer,{sx:e=>({rowGap:e.space.$4,animationName:"footerSlideInUp",animationDuration:`${u.bf.drawer}ms`,animationTimingFunction:u.$$.bezier,"@keyframes footerSlideInUp":{"0%":{transform:"translateY(100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!_&&{animation:"none"}}),children:[(0,o.BX)(s.a.Root,{children:[(0,o.BX)(s.a.Group,{variant:"secondary",children:[(0,o.tZ)(s.a.Title,{title:(0,a.localizationKeys)("commerce.checkout.lineItems.title__totalPaid")}),(0,o.tZ)(s.a.Description,{text:`${g.totalDueNow.currencySymbol}${g.totalDueNow.amountFormatted}`})]}),(0,o.BX)(s.a.Group,{variant:"secondary",children:[(0,o.tZ)(s.a.Title,{title:g.totalDueNow.amount>0?(0,a.localizationKeys)("commerce.checkout.lineItems.title__paymentMethod"):(0,a.localizationKeys)("commerce.checkout.lineItems.title__subscriptionBegins")}),(0,o.tZ)(s.a.Description,{text:g.totalDueNow.amount>0?x?"card"!==x.paymentMethod?`${h(x.paymentMethod)}`:`${h(x.cardType)} \u{22EF} ${x.last4}`:"–":b?(0,d.p)(new Date(b)):"–"})]})]}),(0,o.tZ)(a.Button,{onClick:()=>{r&&e.navigate(r),t&&t(!1)},localizationKey:(0,a.localizationKeys)("formButtonPrimary")})]})]}):null};var g=r(2418),x=r(2672),b=r(7291),$=r(3146),Z=r(9732),S=r(8870),B=r(2189),k=r(4174),w=r(5058),v=r(7106);let z=e=>e[0].toUpperCase()+e.slice(1),D=(0,x.withCardStateProvider)(()=>{let{checkout:e}=(0,l.z4)(),{id:t,plan:r,totals:n,isImmediatePlanChange:c,planPeriod:d}=e;if(!t)return null;let u=!!n.credit?.amount&&n.credit.amount>0,m=!!n.pastDue?.amount&&n.pastDue.amount>0;return(0,o.BX)(i.Drawer.Body,{children:[(0,o.tZ)(a.Box,{elementDescriptor:a.descriptors.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,o.BX)(s.a.Root,{children:[(0,o.BX)(s.a.Group,{children:[(0,o.tZ)(s.a.Title,{title:r.name,description:"annual"===d?(0,a.localizationKeys)("commerce.billedAnnually"):void 0}),(0,o.tZ)(s.a.Description,{prefix:"annual"===d?"x12":void 0,text:`${r.currencySymbol}${"month"===d?r.amountFormatted:r.annualMonthlyAmountFormatted}`,suffix:(0,a.localizationKeys)("commerce.checkout.perMonth")})]}),(0,o.BX)(s.a.Group,{borderTop:!0,variant:"tertiary",children:[(0,o.tZ)(s.a.Title,{title:(0,a.localizationKeys)("commerce.subtotal")}),(0,o.tZ)(s.a.Description,{text:`${n.subtotal.currencySymbol}${n.subtotal.amountFormatted}`})]}),u&&(0,o.BX)(s.a.Group,{variant:"tertiary",children:[(0,o.tZ)(s.a.Title,{title:(0,a.localizationKeys)("commerce.creditRemainder")}),(0,o.tZ)(s.a.Description,{text:`- ${n.credit?.currencySymbol}${n.credit?.amountFormatted}`})]}),m&&(0,o.BX)(s.a.Group,{variant:"tertiary",children:[(0,o.BX)(Z.u.Root,{children:[(0,o.tZ)(Z.u.Trigger,{children:(0,o.tZ)(s.a.Title,{title:(0,a.localizationKeys)("commerce.pastDue"),icon:k.I$})}),(0,o.tZ)(Z.u.Content,{text:(0,a.localizationKeys)("commerce.checkout.pastDueNotice")})]}),(0,o.tZ)(s.a.Description,{text:`${n.pastDue?.currencySymbol}${n.pastDue?.amountFormatted}`})]}),(0,o.BX)(s.a.Group,{borderTop:!0,children:[(0,o.tZ)(s.a.Title,{title:(0,a.localizationKeys)("commerce.totalDueToday")}),(0,o.tZ)(s.a.Description,{text:`${n.totalDueNow.currencySymbol}${n.totalDueNow.amountFormatted}`})]})]})}),!c&&(0,o.tZ)(a.Box,{elementDescriptor:a.descriptors.checkoutFormLineItemsRoot,sx:e=>({paddingBlockStart:e.space.$4,paddingInline:e.space.$4}),children:(0,o.tZ)(a.Text,{localizationKey:(0,a.localizationKeys)("commerce.checkout.downgradeNotice"),variant:"caption",colorScheme:"secondary"})}),(0,o.tZ)(C,{})]})}),_=()=>{let{organization:e}=(0,l.o8)(),{for:t,onSubscriptionComplete:r}=(0,n.useCheckoutContext)(),{checkout:o}=(0,l.z4)(),{id:i,confirm:a}=o,c=(0,x.useCardState)();if(!i)throw Error("Checkout not found");let s=async o=>{c.setLoading(),c.setError(void 0);let{data:i,error:n}=await a({...o,..."organization"===t?{orgId:e?.id}:{}});n?(0,S.S3)(n,[],c.setError):i&&r?.(),c.setIdle()};return{payWithExistingPaymentSource:e=>(e.preventDefault(),s({paymentSourceId:new FormData(e.currentTarget).get("payment_source_id")})),addPaymentSourceAndPay:e=>s(e),payWithTestCard:()=>s({gateway:"stripe",useTestCard:!0})}},C=()=>{let{checkout:e}=(0,l.z4)(),{id:t,totals:r}=e,{data:i}=(0,n.usePaymentMethods)(),[s,d]=(0,c.useState)(()=>i.length>0?"existing":"new");return t?(0,o.BX)(a.Col,{elementDescriptor:a.descriptors.checkoutFormElementsRoot,gap:4,sx:e=>({padding:e.space.$4}),children:[i.length>0&&r.totalDueNow.amount>0&&(0,o.BX)(b.s.Root,{"aria-label":"Payment method source",value:s,onChange:e=>d(e),size:"lg",fullWidth:!0,children:[(0,o.tZ)(b.s.Button,{value:"existing",text:(0,a.localizationKeys)("commerce.paymentMethods")}),(0,o.tZ)(b.s.Button,{value:"new",text:(0,a.localizationKeys)("commerce.addPaymentMethod")})]}),"existing"===s&&(0,o.tZ)(R,{paymentSources:i,totalDueNow:r.totalDueNow}),"new"===s&&(0,o.tZ)(P,{})]}):null},K=()=>{let{isLoading:e}=(0,x.useCardState)(),{payWithTestCard:t}=_();return(0,o.BX)(a.Box,{sx:e=>({background:e.colors.$neutralAlpha50,padding:e.space.$2x5,borderRadius:e.radii.$md,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,display:"flex",flexDirection:"column",rowGap:e.space.$2,position:"relative"}),children:[(0,o.tZ)(a.Box,{sx:e=>({position:"absolute",inset:0,background:`repeating-linear-gradient(-45deg,${e.colors.$warningAlpha100},${e.colors.$warningAlpha100} 6px,${e.colors.$warningAlpha150} 6px,${e.colors.$warningAlpha150} 12px)`,maskImage:"linear-gradient(transparent 20%, black)",pointerEvents:"none"})}),(0,o.BX)(a.Flex,{sx:e=>({alignItems:"center",justifyContent:"center",flexDirection:"column",rowGap:e.space.$2}),children:[(0,o.tZ)(a.Text,{sx:e=>({color:e.colors.$warning500,fontWeight:e.fontWeights.$semibold}),localizationKey:(0,a.localizationKeys)("commerce.paymentSource.dev.developmentMode")}),(0,o.tZ)(a.Button,{type:"button",block:!0,variant:"bordered",localizationKey:(0,a.localizationKeys)("userProfile.billingPage.paymentSourcesSection.payWithTestCardButton"),colorScheme:"secondary",isLoading:e,onClick:t})]})]})},P=(0,x.withCardStateProvider)(()=>{let{addPaymentSourceAndPay:e}=_(),{checkout:t}=(0,l.z4)(),{id:r,totals:i}=t;return r?(0,o.BX)(w.fC,{onSuccess:e,checkout:t,children:[(0,o.tZ)(B.P,{children:(0,o.tZ)(K,{})}),i.totalDueNow.amount>0?(0,o.tZ)(w.OL,{text:(0,a.localizationKeys)("commerce.pay",{amount:`${i.totalDueNow.currencySymbol}${i.totalDueNow.amountFormatted}`})}):(0,o.tZ)(w.OL,{text:(0,a.localizationKeys)("commerce.subscribe")})]}):null}),R=(0,x.withCardStateProvider)(({totalDueNow:e,paymentSources:t})=>{let{checkout:r}=(0,l.z4)(),{paymentSource:i}=r,{payWithExistingPaymentSource:n}=_(),s=(0,x.useCardState)(),[d,u]=(0,c.useState)(i||t.find(e=>e.isDefault)),m=(0,c.useMemo)(()=>t.map(e=>{let t="card"!==e.paymentMethod?`${z(e.paymentMethod)}`:`${z(e.cardType)} \u{22EF} ${e.last4}`;return{value:e.id,label:t}}),[t]);return(0,o.BX)(a.Form,{onSubmit:n,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$4}),children:[e.amount>0?(0,o.BX)($.Ph,{elementId:"paymentSource",options:m,value:d?.id||null,onChange:e=>{u(t.find(t=>t.id===e.value))},portal:!0,children:[(0,o.tZ)("input",{name:"payment_source_id",type:"hidden",value:d?.id}),(0,o.tZ)($.UN,{icon:k.jC,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),children:d&&(0,o.tZ)(v.j,{paymentSource:d})}),(0,o.tZ)($.pp,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]}):(0,o.tZ)("input",{name:"payment_source_id",type:"hidden",value:d?.id}),(0,o.tZ)(g.Z.Alert,{children:s.error}),(0,o.tZ)(a.Button,{type:"submit",colorScheme:"primary",size:"sm",textVariant:"buttonLarge",sx:{width:"100%"},isLoading:s.isLoading,children:(0,o.tZ)(a.Text,{localizationKey:e.amount>0?(0,a.localizationKeys)("commerce.pay",{amount:`${e.currencySymbol}${e.amountFormatted}`}):(0,a.localizationKeys)("commerce.subscribe")})})]})});var A=r(8018);let X=()=>{let{checkout:e}=(0,l.z4)();return(0,c.useEffect)(()=>(e.start(),e.clear),[]),null},F=({children:e})=>{let{planId:t,planPeriod:r,for:i}=(0,A.w6)();return(0,o.BX)(l.hA,{for:i,planId:t,planPeriod:r,children:[(0,o.tZ)(X,{}),e]})},T=({children:e,name:t})=>{let{checkout:r}=(0,l.z4)();return r.status!==t?null:e},I=({children:e,status:t})=>{let{checkout:r}=(0,l.z4)(),{fetchStatus:o,error:i}=r;return(0,c.useMemo)(()=>{if("error"===o&&i?.errors){let e=i.errors.map(e=>e.code);if(e.includes("missing_payer_email"))return"missing_payer_email";if(e.includes("invalid_plan_change"))return"invalid_plan_change"}return o},[o,i])!==t?null:e};var L=r(9117),E=r(9140);let M=()=>{let{checkout:e}=(0,l.z4)(),{translateError:t}=(0,a.useLocalizations)(),{t:r}=(0,a.useLocalizations)();return(0,o.tZ)(i.Drawer.Body,{children:(0,o.tZ)(a.Flex,{align:"center",justify:"center",sx:e=>({height:"100%",padding:e.space.$4,fontSize:e.fontSizes.$md}),children:(0,o.tZ)(L.b,{variant:"danger",colorScheme:"danger",children:e.error?t(e.error.errors[0]):r((0,a.localizationKeys)("unstable__errors.form_param_value_invalid"))})})})},j=()=>{let{planPeriod:e}=(0,n.useCheckoutContext)(),{checkout:t}=(0,l.z4)(),r=t.error,d=(0,c.useMemo)(()=>{let e=r?.errors.find(e=>"invalid_plan_change"===e.code);return e?.meta?.plan},[r]),u=(0,c.useMemo)(()=>{let e=r?.errors.find(e=>"invalid_plan_change"===e.code);return e?.meta?.isPlanUpgradePossible||!1},[r]);return d?(0,o.tZ)(i.Drawer.Body,{children:(0,o.BX)(a.Flex,{gap:4,direction:"col",children:[(0,o.tZ)(a.Box,{elementDescriptor:a.descriptors.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,o.tZ)(s.a.Root,{children:(0,o.BX)(s.a.Group,{children:[(0,o.tZ)(s.a.Title,{title:d.name,description:"annual"===e?(0,a.localizationKeys)("commerce.billedAnnually"):void 0}),(0,o.tZ)(s.a.Description,{prefix:"annual"===e?"x12":void 0,text:`${d.currency_symbol}${"month"===e?d.amount_formatted:d.annual_monthly_amount_formatted}`,suffix:(0,a.localizationKeys)("commerce.checkout.perMonth")})]})})}),(0,o.tZ)(a.Box,{sx:e=>({padding:e.space.$4}),children:(0,o.tZ)(L.b,{variant:"info",colorScheme:"info",title:u?(0,a.localizationKeys)("commerce.cannotSubscribeMonthly"):(0,a.localizationKeys)("commerce.cannotSubscribeUnrecoverable")})})]})}):null},N=()=>{let{checkout:e}=(0,l.z4)(),{setIsOpen:t}=(0,i.useDrawerContext)();return(0,o.tZ)(i.Drawer.Body,{children:(0,o.tZ)(a.Box,{sx:e=>({padding:e.space.$4}),children:(0,o.tZ)(E._,{title:(0,a.localizationKeys)("commerce.checkout.emailForm.title"),subtitle:(0,a.localizationKeys)("commerce.checkout.emailForm.subtitle"),onSuccess:()=>void e.start(),onReset:()=>t(!1),disableAutoFocus:!0})})})},U=e=>(0,o.tZ)(a.Flow.Root,{flow:"checkout",children:(0,o.tZ)(a.Flow.Part,{children:(0,o.tZ)(n.SubscriberTypeContext.Provider,{value:e.for||"user",children:(0,o.tZ)(n.CheckoutContext.Provider,{value:{componentName:"Checkout",...e},children:(0,o.BX)(i.Drawer.Content,{children:[(0,o.tZ)(i.Drawer.Header,{title:(0,a.localizationKeys)("commerce.checkout.title")}),(0,o.BX)(F,{children:[(0,o.BX)(T,{name:"needs_initialization",children:[(0,o.tZ)(I,{status:"fetching",children:(0,o.tZ)(a.Spinner,{sx:{margin:"auto"}})}),(0,o.tZ)(I,{status:"invalid_plan_change",children:(0,o.tZ)(j,{})}),(0,o.tZ)(I,{status:"missing_payer_email",children:(0,o.tZ)(N,{})}),(0,o.tZ)(I,{status:"error",children:(0,o.tZ)(M,{})})]}),(0,o.tZ)(T,{name:"completed",children:(0,o.tZ)(y,{})}),(0,o.tZ)(T,{name:"needs_confirmation",children:(0,o.tZ)(D,{})})]})]})})})})})},5058:function(e,t,r){r.d(t,{hG:()=>z,ph:()=>v,fC:()=>k,OL:()=>D});var o=r(9109),i=r(3799),n=r(9144),a=r(2418),l=r(2672),c=r(431),s=r(9460),d=r(8487),u=r(8849),m=r(8870),p=r(1576),h=r(4204);let f=e=>(0,o.tZ)(h.Box,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),y=()=>(0,o.tZ)(f,{sx:e=>({height:e.space.$10,width:"100%"})}),g=e=>(0,o.tZ)(h.Flex,{direction:"col",gap:2,children:e.children}),x=()=>(0,o.tZ)(h.Box,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,o.BX)(h.Flex,{direction:"col",gap:5,children:[(0,o.BX)(g,{children:[(0,o.tZ)(f,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,o.tZ)(y,{})]}),(0,o.BX)(h.Grid,{columns:2,gap:4,children:[(0,o.BX)(g,{children:[(0,o.tZ)(f,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,o.tZ)(y,{})]}),(0,o.BX)(g,{children:[(0,o.tZ)(f,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,o.tZ)(y,{})]})]}),(0,o.BX)(g,{children:[(0,o.tZ)(f,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,o.tZ)(y,{})]}),(0,o.BX)(g,{children:[(0,o.tZ)(f,{}),(0,o.tZ)(f,{}),(0,o.tZ)(f,{sx:{width:"66.666667%"}})]})]})}),[b,$]=(0,i.uH)("AddPaymentSourceRoot"),Z=({children:e,checkout:t,...r})=>{let a=(0,p.useSubscriberTypeContext)(),l=(0,n.useRef)(null),{t:c}=(0,h.useLocalizations)(),[s,d]=(0,n.useState)(void 0),[m,f]=(0,n.useState)(void 0),[y,g]=(0,n.useState)(void 0),x=(e=>{let t=(0,h.useAppearance)().parsedInternalTheme;return(0,n.useMemo)(()=>{if(!e)return;let{colors:r,fontWeights:o,fontSizes:i,radii:n,space:a}=t;return{colorPrimary:(0,u.Aj)(e,r.$primary500,r.$colorBackground),colorBackground:(0,u.Aj)(e,r.$colorInput,r.$colorBackground),colorText:(0,u.Aj)(e,r.$colorForeground,r.$colorBackground),colorTextSecondary:(0,u.Aj)(e,r.$colorMutedForeground,r.$colorBackground),colorSuccess:(0,u.Aj)(e,r.$success500,r.$colorBackground),colorDanger:(0,u.Aj)(e,r.$danger500,r.$colorBackground),colorWarning:(0,u.Aj)(e,r.$warning500,r.$colorBackground),fontWeightNormal:(0,u.uj)(e,"font-weight",o.$normal.toString()),fontWeightMedium:(0,u.uj)(e,"font-weight",o.$medium.toString()),fontWeightBold:(0,u.uj)(e,"font-weight",o.$bold.toString()),fontSizeXl:(0,u.uj)(e,"font-size",i.$xl),fontSizeLg:(0,u.uj)(e,"font-size",i.$lg),fontSizeSm:(0,u.uj)(e,"font-size",i.$md),fontSizeXs:(0,u.uj)(e,"font-size",i.$sm),borderRadius:(0,u.uj)(e,"border-radius",n.$lg),spacingUnit:(0,u.uj)(e,"padding",a.$1)}},[t,e])})(l.current);return(0,o.BX)(b.Provider,{value:{value:{headerTitle:s,headerSubtitle:m,submitLabel:y,setHeaderTitle:d,setHeaderSubtitle:f,setSubmitLabel:g,checkout:t,...r}},children:[(0,o.tZ)("div",{ref:l,style:{display:"none"}}),(0,o.tZ)(i.pe,{checkout:t,for:a,stripeAppearance:x,paymentDescription:c((0,h.localizationKeys)(t?.planPeriod==="month"?"commerce.paymentSource.applePayDescription.monthly":"commerce.paymentSource.applePayDescription.annual")),children:e})]})},S=e=>{let{isProviderReady:t}=(0,i.Wh)();return t?null:e.children},B=e=>{let{isProviderReady:t}=(0,i.Wh)();return t?(0,o.tZ)(o.HY,{children:e.children}):null},k=e=>{let{children:t,...r}=e;return(0,o.BX)(Z,{...r,children:[(0,o.tZ)(S,{children:(0,o.tZ)(h.Flex,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,o.tZ)(h.Spinner,{size:"lg",colorScheme:"primary",elementDescriptor:h.descriptors.spinner})})}),(0,o.tZ)(B,{children:(0,o.tZ)(_,{children:t})})]})},w=(e,t)=>{(0,n.useRef)(()=>{t(e)}),(0,n.useEffect)(()=>{t(e)},[e,t])},v=({text:e})=>{let{setHeaderTitle:t}=$();return w(e,t),null},z=({text:e})=>{let{setHeaderSubtitle:t}=$();return w(e,t),null},D=({text:e})=>{let{setSubmitLabel:t}=$();return w(e,t),null},_=({children:e})=>{let{headerTitle:t,headerSubtitle:r,submitLabel:n,checkout:u,onSuccess:f,cancelAction:y}=$(),g=(0,l.useCardState)(),b=(0,p.useSubscriberTypeLocalizationRoot)(),{isFormReady:Z,submit:S,reset:B}=(0,i.Wh)(),k=async e=>{e.preventDefault(),g.setLoading(),g.setError(void 0);let{data:t,error:r}=await S();if(!r)try{await f(t)}catch(e){(0,m.S3)(e,[],g.setError)}finally{g.setIdle(),B()}};return(0,o.tZ)(d.Y,{headerTitle:t,headerSubtitle:r,children:(0,o.BX)(c.l.Root,{onSubmit:k,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[e,(0,o.tZ)(i.Y7,{fallback:(0,o.tZ)(x,{})}),(0,o.tZ)(a.Z.Alert,{children:g.error}),(0,o.tZ)(s.A,{isDisabled:!Z,submitLabel:n??(0,h.localizationKeys)(`${b}.billingPage.paymentSourcesSection.formButtonPrimary__add`),onReset:y,hideReset:!y,sx:{flex:u?1:void 0}})]})})}},7106:function(e,t,r){r.d(t,{j:()=>a});var o=r(9109),i=r(4204),n=r(4174);let a=({paymentSource:e})=>(0,o.BX)(i.Flex,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:i.descriptors.paymentSourceRow,children:[(0,o.tZ)(i.Icon,{icon:"card"===e.paymentMethod?n.aB:n.Nn,sx:{alignSelf:"center"},elementDescriptor:i.descriptors.paymentSourceRowIcon}),(0,o.tZ)(i.Text,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:i.descriptors.paymentSourceRowType,children:"card"===e.paymentMethod?e.cardType:e.paymentMethod}),(0,o.tZ)(i.Text,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:i.descriptors.paymentSourceRowValue,children:"card"===e.paymentMethod?`\u{22EF} ${e.last4}`:null}),e.isDefault&&(0,o.tZ)(i.Badge,{elementDescriptor:i.descriptors.paymentSourceRowBadge,elementId:i.descriptors.paymentSourceRowBadge.setId("default"),localizationKey:(0,i.localizationKeys)("badge__default")}),"expired"===e.status&&(0,o.tZ)(i.Badge,{elementDescriptor:i.descriptors.paymentSourceRowBadge,elementId:i.descriptors.paymentSourceRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,i.localizationKeys)("badge__expired")})]})},9140:function(e,t,r){r.d(t,{_:()=>S});var o=r(9109),i=r(3799),n=r(9144),a=r(2672),l=r(431),c=r(9460),s=r(8487),d=r(8870),u=r(6788),m=r(8969),p=r(1576),h=r(7703),f=r(207),y=r(4676),g=r(3344),x=r(4204),b=r(2464);let $=e=>{let{navigate:t}=(0,y.useRouter)(),{email:r,nextStep:i,onReset:l}=e,s=(0,a.useCardState)(),u=(0,p.useUserProfileContext)(),{startEnterpriseSSOLinkFlow:m}=(0,b.eq)(r);async function h(){await t(r.verification.externalVerificationRedirectURL?.href||"")}return n.useEffect(()=>{let{mode:e,componentName:t}=u;m({redirectUrl:"modal"===e?(0,g.bX)({url:window.location.href,componentName:t}):window.location.href}).then(()=>i()).catch(e=>(0,d.S3)(e,[],s.setError))},[]),(0,o.BX)(o.HY,{children:[(0,o.tZ)(x.Flex,{justify:"center",children:(0,o.tZ)(x.Button,{variant:"link",onClick:h,localizationKey:(0,x.localizationKeys)("userProfile.emailAddressPage.enterpriseSSOLink.formButton")})}),(0,o.tZ)(c.K,{children:(0,o.tZ)(x.Button,{variant:"ghost",localizationKey:(0,x.localizationKeys)("userProfile.formButtonReset"),elementDescriptor:x.descriptors.formButtonReset,onClick:l})})]})};var Z=r(2786);let S=(0,a.withCardStateProvider)(e=>{let{emailId:t,onSuccess:r,onReset:y,disableAutoFocus:g=!1}=e,x=(0,a.useCardState)(),{user:b}=(0,i.aF)(),S=(0,p.useEnvironment)(),w=(0,i.WZ)(e=>b?.createEmailAddress({email:e})),v=n.useRef(b?.emailAddresses.find(e=>e.id===t)),z=k(v.current,S),D=(0,m.a2)({defaultStep:+!!v.current,onNextStep:()=>x.setError(void 0)}),_=(0,u.Yp)("emailAddress","",{type:"email",label:(0,h.u1)("formFieldLabel__emailAddress"),placeholder:(0,h.u1)("formFieldInputPlaceholder__emailAddress"),isRequired:!0}),C=_.value.length>1&&b?.username!==_.value,K=async e=>{if(e.preventDefault(),b)return w(_.value).then(e=>{v.current=e,D.nextStep()}).catch(e=>(0,d.S3)(e,[_],x.setError))},P=B(z);return(0,o.BX)(m.en,{...D.props,children:[(0,o.tZ)(s.Y,{headerTitle:e.title||(0,h.u1)("userProfile.emailAddressPage.title"),headerSubtitle:e.subtitle||(0,h.u1)("userProfile.emailAddressPage.formHint"),children:(0,o.BX)(l.l.Root,{onSubmit:K,children:[(0,o.tZ)(l.l.ControlRow,{elementId:_.id,children:(0,o.tZ)(l.l.PlainInput,{..._.props,autoFocus:!g})}),(0,o.tZ)(c.A,{submitLabel:(0,h.u1)("userProfile.formButtonPrimary__add"),isDisabled:!C,onReset:y})]})}),(0,o.BX)(s.Y,{headerTitle:(0,h.u1)("userProfile.emailAddressPage.verifyTitle"),headerSubtitle:(0,h.u1)(`${P}.formSubtitle`,{identifier:v.current?.emailAddress||""}),children:["email_link"===z&&(0,o.tZ)(Z.K,{nextStep:r,email:v.current,onReset:y}),"email_code"===z&&(0,o.tZ)(f.H,{nextStep:r,identification:v.current,identifier:v.current?.emailAddress,prepareVerification:()=>v.current?.prepareVerification({strategy:"email_code"}),onReset:y}),"enterprise_sso"===z&&(0,o.tZ)($,{nextStep:r,email:v.current,onReset:y})]})]})}),B=e=>{switch(e){case"email_code":return"userProfile.emailAddressPage.emailCode";case"enterprise_sso":return"userProfile.emailAddressPage.enterpriseSSOLink";case"email_link":return"userProfile.emailAddressPage.emailLink";default:throw Error(`Unsupported strategy for email verification: ${e}`)}},k=(e,t)=>e?.matchesSsoConnection?"enterprise_sso":!function(e){let{userSettings:t}=e,{email_address:r}=t.attributes;return!!(r?.enabled&&r?.verifications.includes("email_link"))}(t)?"email_code":"email_link"},207:function(e,t,r){r.d(t,{H:()=>u});var o=r(9109),i=r(9144),n=r(2667),a=r(2672),l=r(431),c=r(9460),s=r(8870),d=r(4204);let u=e=>{let t=(0,a.useCardState)(),{nextStep:r,identification:u,identifier:m,onReset:p,prepareVerification:h}=e,f=()=>h?.()?.catch(e=>(0,s.S3)(e,[],t.setError)),y=(0,n.e3)({onCodeEntryFinished:(e,t,r)=>{u?.attemptVerification({code:e}).then(()=>t()).catch(r)},onResendCodeClicked:f,onResolve:r});return i.useEffect(()=>{f()},[]),(0,o.BX)(o.HY,{children:[(0,o.tZ)(l.l.OTPInput,{...y,label:(0,d.localizationKeys)("userProfile.emailAddressPage.emailCode.formTitle"),description:(0,d.localizationKeys)("userProfile.emailAddressPage.emailCode.formSubtitle",{identifier:m||""}),resendButton:(0,d.localizationKeys)("userProfile.emailAddressPage.emailCode.resendButton"),centerAlign:!1}),(0,o.BX)(c.K,{children:[(0,o.tZ)(d.Button,{isLoading:y.isLoading,localizationKey:(0,d.localizationKeys)("formButtonPrimary__verify"),elementDescriptor:d.descriptors.formButtonPrimary,onClick:y.onFakeContinue}),(0,o.tZ)(d.Button,{variant:"ghost",isDisabled:y.isLoading,localizationKey:(0,d.localizationKeys)("userProfile.formButtonReset"),elementDescriptor:d.descriptors.formButtonReset,onClick:p})]})]})}},2786:function(e,t,r){r.d(t,{K:()=>h,M:()=>f});var o=r(9109),i=r(9144),n=r(2672),a=r(9460),l=r(5495),c=r(8870),s=r(8969),d=r(6749),u=r(1576),m=r(4204),p=r(2464);let h=e=>{let{email:t,nextStep:r,onReset:s}=e,h=(0,n.useCardState)(),f=(0,u.useUserProfileContext)(),{startEmailLinkFlow:y}=(0,p.E2)(t),{displayConfig:g}=(0,u.useEnvironment)();function x(){let{routing:e}=f,t="virtual"===e?g.userProfileUrl:"";y({redirectUrl:(0,d.Uu)({ctx:f,baseUrl:t,intent:"profile"})}).then(()=>r()).catch(e=>(0,c.S3)(e,[],h.setError))}return i.useEffect(()=>{x()},[]),(0,o.BX)(o.HY,{children:[(0,o.tZ)(l.V,{resendButton:(0,m.localizationKeys)("userProfile.emailAddressPage.emailLink.resendButton"),onResendCodeClicked:x}),(0,o.tZ)(a.K,{children:(0,o.tZ)(m.Button,{variant:"ghost",localizationKey:(0,m.localizationKeys)("userProfile.formButtonReset"),elementDescriptor:m.descriptors.formButtonReset,onClick:s})})]})},f=()=>(0,o.tZ)(s.Ej,{title:(0,m.localizationKeys)("signUp.emailLink.verifiedSwitchTab.title"),subtitle:(0,m.localizationKeys)("signUp.emailLink.verifiedSwitchTab.subtitle"),status:"verified"})}}]);