@clerk/clerk-js
Version:
Clerk JS library
1 lines • 30.4 kB
JavaScript
;(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["237"],{10670:function(e,t,o){o.r(t),o.d(t,{Checkout:()=>U});var r=o(79109),i=o(81102),n=o(11576),a=o(64204);o(65223);var l=o(83799),c=o(69144),s=o(28e3),d=o(39082),u=o(73003),m=o(12464),p=o(24676);let h=e=>e[0].toUpperCase()+e.slice(1),f=(e,t,o)=>e+(t-e)*o,y=()=>{let e=(0,p.useRouter)(),{setIsOpen:t}=(0,i.useDrawerContext)(),{newSubscriptionRedirectUrl:o}=(0,n.useCheckoutContext)(),{checkout:y}=(0,l.z4)(),{totals:g,paymentSource:x,planPeriodStart:b}=y,[v,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)(),z=(0,c.useId)(),$=(0,m.Tb)(),{animations:D}=(0,a.useAppearance)().parsedLayout,_=!$&&!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,v.x,.15),y:f(e.y,v.y,.15)})),C.current=requestAnimationFrame(e)};return C.current=requestAnimationFrame(e),()=>{C.current&&cancelAnimationFrame(C.current)}},[v,P]),g)?(0,r.BX)(r.HY,{children:[(0,r.tZ)(i.Drawer.Body,{children:(0,r.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:"".concat(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(),o=e.clientX-t.left,r=e.clientY-t.top,i=t.width;i>0?Z({x:o/i*512,y:r/i*512}):Z({x:256,y:256})}},children:[(0,r.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,r.BX)("defs",{children:[(0,r.BX)("radialGradient",{id:"clerk-checkout-success-gradient",children:[(0,r.tZ)("stop",{offset:"0%",style:{stopColor:"var(--ring-highlight)"}}),(0,r.tZ)("stop",{offset:"100%",stopOpacity:"0",style:{stopColor:"var(--ring-highlight)"}})]}),(0,r.tZ)("filter",{id:"clerk-checkout-success-blur-effect",children:(0,r.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:z}].map(e=>{let{maskStart:t,maskEnd:o,id:i}=e;return(0,r.BX)("linearGradient",{id:"gradient-".concat(i),x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[(0,r.tZ)("stop",{offset:"".concat(t+5,"%"),stopColor:"white",stopOpacity:"0"}),(0,r.tZ)("stop",{offset:"".concat(t+35,"%"),stopColor:"white",stopOpacity:"1"}),(0,r.tZ)("stop",{offset:"".concat(o-35,"%"),stopColor:"white",stopOpacity:"1"}),(0,r.tZ)("stop",{offset:"".concat(o-5,"%"),stopColor:"white",stopOpacity:"0"})]},i)}),(0,r.tZ)("mask",{id:"clerk-checkout-success-mask",children:[{r:225,id:k},{r:162.5,id:w},{r:100,id:z}].map(e=>{let{r:t,id:o}=e;return(0,r.tZ)("circle",{cx:"256",cy:"256",r:t,stroke:"url(#gradient-".concat(o,")"),fill:"none",strokeWidth:"1"},o)})})]}),(0,r.BX)("g",{mask:"url(#clerk-checkout-success-mask)",children:[(0,r.tZ)("rect",{width:"512",height:"512",style:{fill:"var(--ring-fill)"}}),P&&(0,r.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,r.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,r.tZ)("svg",{fill:"none",viewBox:"0 0 10 10","aria-hidden":"true",style:{position:"relative",margin:"auto",width:"1rem",height:"1rem"},children:(0,r.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 ".concat(u.bf.drawer,"ms ").concat(u.$$.bezier," forwards ").concat(u.bf.slow,"ms"):"none",...!_&&{strokeDashoffset:"0"}}})}),(0,r.tZ)("style",{children:"\n @keyframes check {\n 0% {\n stroke-dashoffset: 1;\n }\n 100% {\n stroke-dashoffset: 0;\n }\n "})]}),(0,r.BX)(a.Span,{sx:e=>({margin:"auto",gridArea:"1/1",position:"relative",textAlign:"center",transform:"translateY(".concat(e.space.$20,")")}),children:[(0,r.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:"".concat(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,r.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:"".concat(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,r.BX)(i.Drawer.Footer,{sx:e=>({rowGap:e.space.$4,animationName:"footerSlideInUp",animationDuration:"".concat(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,r.BX)(s.a.Root,{children:[(0,r.BX)(s.a.Group,{variant:"secondary",children:[(0,r.tZ)(s.a.Title,{title:(0,a.localizationKeys)("commerce.checkout.lineItems.title__totalPaid")}),(0,r.tZ)(s.a.Description,{text:"".concat(g.totalDueNow.currencySymbol).concat(g.totalDueNow.amountFormatted)})]}),(0,r.BX)(s.a.Group,{variant:"secondary",children:[(0,r.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,r.tZ)(s.a.Description,{text:g.totalDueNow.amount>0?x?"card"!==x.paymentMethod?"".concat(h(x.paymentMethod)):"".concat(h(x.cardType)," ⋯ ").concat(x.last4):"–":b?(0,d.p)(new Date(b)):"–"})]})]}),(0,r.tZ)(a.Button,{onClick:()=>{o&&e.navigate(o),t&&t(!1)},localizationKey:(0,a.localizationKeys)("formButtonPrimary")})]})]}):null};o(92037);var g=o(92418),x=o(2672),b=o(47291),v=o(3146),Z=o(19732),S=o(88870),B=o(22189),k=o(96519),w=o(75058),z=o(57106);let $=e=>e[0].toUpperCase()+e.slice(1),D=(0,x.withCardStateProvider)(()=>{var e,t,o,n,c,d;let{checkout:u}=(0,l.z4)(),{id:m,plan:p,totals:h,isImmediatePlanChange:f,planPeriod:y}=u;if(!m)return null;let g=!!(null==(e=h.credit)?void 0:e.amount)&&h.credit.amount>0,x=!!(null==(t=h.pastDue)?void 0:t.amount)&&h.pastDue.amount>0;return(0,r.BX)(i.Drawer.Body,{children:[(0,r.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,r.BX)(s.a.Root,{children:[(0,r.BX)(s.a.Group,{children:[(0,r.tZ)(s.a.Title,{title:p.name,description:"annual"===y?(0,a.localizationKeys)("commerce.billedAnnually"):void 0}),(0,r.tZ)(s.a.Description,{prefix:"annual"===y?"x12":void 0,text:"".concat(p.currencySymbol).concat("month"===y?p.amountFormatted:p.annualMonthlyAmountFormatted),suffix:(0,a.localizationKeys)("commerce.checkout.perMonth")})]}),(0,r.BX)(s.a.Group,{borderTop:!0,variant:"tertiary",children:[(0,r.tZ)(s.a.Title,{title:(0,a.localizationKeys)("commerce.subtotal")}),(0,r.tZ)(s.a.Description,{text:"".concat(h.subtotal.currencySymbol).concat(h.subtotal.amountFormatted)})]}),g&&(0,r.BX)(s.a.Group,{variant:"tertiary",children:[(0,r.tZ)(s.a.Title,{title:(0,a.localizationKeys)("commerce.creditRemainder")}),(0,r.tZ)(s.a.Description,{text:"- ".concat(null==(o=h.credit)?void 0:o.currencySymbol).concat(null==(n=h.credit)?void 0:n.amountFormatted)})]}),x&&(0,r.BX)(s.a.Group,{variant:"tertiary",children:[(0,r.BX)(Z.u.Root,{children:[(0,r.tZ)(Z.u.Trigger,{children:(0,r.tZ)(s.a.Title,{title:(0,a.localizationKeys)("commerce.pastDue"),icon:k.I$})}),(0,r.tZ)(Z.u.Content,{text:(0,a.localizationKeys)("commerce.checkout.pastDueNotice")})]}),(0,r.tZ)(s.a.Description,{text:"".concat(null==(c=h.pastDue)?void 0:c.currencySymbol).concat(null==(d=h.pastDue)?void 0:d.amountFormatted)})]}),(0,r.BX)(s.a.Group,{borderTop:!0,children:[(0,r.tZ)(s.a.Title,{title:(0,a.localizationKeys)("commerce.totalDueToday")}),(0,r.tZ)(s.a.Description,{text:"".concat(h.totalDueNow.currencySymbol).concat(h.totalDueNow.amountFormatted)})]})]})}),!f&&(0,r.tZ)(a.Box,{elementDescriptor:a.descriptors.checkoutFormLineItemsRoot,sx:e=>({paddingBlockStart:e.space.$4,paddingInline:e.space.$4}),children:(0,r.tZ)(a.Text,{localizationKey:(0,a.localizationKeys)("commerce.checkout.downgradeNotice"),variant:"caption",colorScheme:"secondary"})}),(0,r.tZ)(C,{})]})}),_=()=>{let{organization:e}=(0,l.o8)(),{for:t,onSubscriptionComplete:o}=(0,n.useCheckoutContext)(),{checkout:r}=(0,l.z4)(),{id:i,confirm:a}=r,c=(0,x.useCardState)();if(!i)throw Error("Checkout not found");let s=async r=>{c.setLoading(),c.setError(void 0);let{data:i,error:n}=await a({...r,..."organization"===t?{orgId:null==e?void 0:e.id}:{}});n?(0,S.S3)(n,[],c.setError):i&&(null==o||o()),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:o}=e,{data:i}=(0,n.usePaymentMethods)(),[s,d]=(0,c.useState)(()=>i.length>0?"existing":"new");return t?(0,r.BX)(a.Col,{elementDescriptor:a.descriptors.checkoutFormElementsRoot,gap:4,sx:e=>({padding:e.space.$4}),children:[i.length>0&&o.totalDueNow.amount>0&&(0,r.BX)(b.s.Root,{"aria-label":"Payment method source",value:s,onChange:e=>d(e),size:"lg",fullWidth:!0,children:[(0,r.tZ)(b.s.Button,{value:"existing",text:(0,a.localizationKeys)("commerce.paymentMethods")}),(0,r.tZ)(b.s.Button,{value:"new",text:(0,a.localizationKeys)("commerce.addPaymentMethod")})]}),"existing"===s&&(0,r.tZ)(R,{paymentSources:i,totalDueNow:o.totalDueNow}),"new"===s&&(0,r.tZ)(P,{})]}):null},K=()=>{let{isLoading:e}=(0,x.useCardState)(),{payWithTestCard:t}=_();return(0,r.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,r.tZ)(a.Box,{sx:e=>({position:"absolute",inset:0,background:"repeating-linear-gradient(-45deg,".concat(e.colors.$warningAlpha100,",").concat(e.colors.$warningAlpha100," 6px,").concat(e.colors.$warningAlpha150," 6px,").concat(e.colors.$warningAlpha150," 12px)"),maskImage:"linear-gradient(transparent 20%, black)",pointerEvents:"none"})}),(0,r.BX)(a.Flex,{sx:e=>({alignItems:"center",justifyContent:"center",flexDirection:"column",rowGap:e.space.$2}),children:[(0,r.tZ)(a.Text,{sx:e=>({color:e.colors.$warning500,fontWeight:e.fontWeights.$semibold}),localizationKey:(0,a.localizationKeys)("commerce.paymentSource.dev.developmentMode")}),(0,r.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:o,totals:i}=t;return o?(0,r.BX)(w.fC,{onSuccess:e,checkout:t,children:[(0,r.tZ)(B.P,{children:(0,r.tZ)(K,{})}),i.totalDueNow.amount>0?(0,r.tZ)(w.OL,{text:(0,a.localizationKeys)("commerce.pay",{amount:"".concat(i.totalDueNow.currencySymbol).concat(i.totalDueNow.amountFormatted)})}):(0,r.tZ)(w.OL,{text:(0,a.localizationKeys)("commerce.subscribe")})]}):null}),R=(0,x.withCardStateProvider)(e=>{let{totalDueNow:t,paymentSources:o}=e,{checkout:i}=(0,l.z4)(),{paymentSource:n}=i,{payWithExistingPaymentSource:s}=_(),d=(0,x.useCardState)(),[u,m]=(0,c.useState)(n||o.find(e=>e.isDefault)),p=(0,c.useMemo)(()=>o.map(e=>{let t="card"!==e.paymentMethod?"".concat($(e.paymentMethod)):"".concat($(e.cardType)," ⋯ ").concat(e.last4);return{value:e.id,label:t}}),[o]);return(0,r.BX)(a.Form,{onSubmit:s,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$4}),children:[t.amount>0?(0,r.BX)(v.Ph,{elementId:"paymentSource",options:p,value:(null==u?void 0:u.id)||null,onChange:e=>{m(o.find(t=>t.id===e.value))},portal:!0,children:[(0,r.tZ)("input",{name:"payment_source_id",type:"hidden",value:null==u?void 0:u.id}),(0,r.tZ)(v.UN,{icon:k.jC,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),children:u&&(0,r.tZ)(z.j,{paymentSource:u})}),(0,r.tZ)(v.pp,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]}):(0,r.tZ)("input",{name:"payment_source_id",type:"hidden",value:null==u?void 0:u.id}),(0,r.tZ)(g.Z.Alert,{children:d.error}),(0,r.tZ)(a.Button,{type:"submit",colorScheme:"primary",size:"sm",textVariant:"buttonLarge",sx:{width:"100%"},isLoading:d.isLoading,children:(0,r.tZ)(a.Text,{localizationKey:t.amount>0?(0,a.localizationKeys)("commerce.pay",{amount:"".concat(t.currencySymbol).concat(t.amountFormatted)}):(0,a.localizationKeys)("commerce.subscribe")})})]})});o(28419);var A=o(18018);let X=()=>{let{checkout:e}=(0,l.z4)();return(0,c.useEffect)(()=>(e.start(),e.clear),[]),null},F=e=>{let{children:t}=e,{planId:o,planPeriod:i,for:n}=(0,A.w6)();return(0,r.BX)(l.hA,{for:n,planId:o,planPeriod:i,children:[(0,r.tZ)(X,{}),t]})},T=e=>{let{children:t,name:o}=e,{checkout:r}=(0,l.z4)();return r.status!==o?null:t},I=e=>{let{children:t,status:o}=e,{checkout:r}=(0,l.z4)(),{fetchStatus:i,error:n}=r;return(0,c.useMemo)(()=>{if("error"===i&&(null==n?void 0:n.errors)){let e=n.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 i},[i,n])!==o?null:t};var L=o(9117),M=o(99140);let E=()=>{let{checkout:e}=(0,l.z4)(),{translateError:t}=(0,a.useLocalizations)(),{t:o}=(0,a.useLocalizations)();return(0,r.tZ)(i.Drawer.Body,{children:(0,r.tZ)(a.Flex,{align:"center",justify:"center",sx:e=>({height:"100%",padding:e.space.$4,fontSize:e.fontSizes.$md}),children:(0,r.tZ)(L.b,{variant:"danger",colorScheme:"danger",children:e.error?t(e.error.errors[0]):o((0,a.localizationKeys)("unstable__errors.form_param_value_invalid"))})})})},j=()=>{let{planPeriod:e}=(0,n.useCheckoutContext)(),{checkout:t}=(0,l.z4)(),o=t.error,d=(0,c.useMemo)(()=>{var e;let t=null==o?void 0:o.errors.find(e=>"invalid_plan_change"===e.code);return null==t||null==(e=t.meta)?void 0:e.plan},[o]),u=(0,c.useMemo)(()=>{var e;let t=null==o?void 0:o.errors.find(e=>"invalid_plan_change"===e.code);return(null==t||null==(e=t.meta)?void 0:e.isPlanUpgradePossible)||!1},[o]);return d?(0,r.tZ)(i.Drawer.Body,{children:(0,r.BX)(a.Flex,{gap:4,direction:"col",children:[(0,r.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,r.tZ)(s.a.Root,{children:(0,r.BX)(s.a.Group,{children:[(0,r.tZ)(s.a.Title,{title:d.name,description:"annual"===e?(0,a.localizationKeys)("commerce.billedAnnually"):void 0}),(0,r.tZ)(s.a.Description,{prefix:"annual"===e?"x12":void 0,text:"".concat(d.currency_symbol).concat("month"===e?d.amount_formatted:d.annual_monthly_amount_formatted),suffix:(0,a.localizationKeys)("commerce.checkout.perMonth")})]})})}),(0,r.tZ)(a.Box,{sx:e=>({padding:e.space.$4}),children:(0,r.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,r.tZ)(i.Drawer.Body,{children:(0,r.tZ)(a.Box,{sx:e=>({padding:e.space.$4}),children:(0,r.tZ)(M._,{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,r.tZ)(a.Flow.Root,{flow:"checkout",children:(0,r.tZ)(a.Flow.Part,{children:(0,r.tZ)(n.SubscriberTypeContext.Provider,{value:e.for||"user",children:(0,r.tZ)(n.CheckoutContext.Provider,{value:{componentName:"Checkout",...e},children:(0,r.BX)(i.Drawer.Content,{children:[(0,r.tZ)(i.Drawer.Header,{title:(0,a.localizationKeys)("commerce.checkout.title")}),(0,r.BX)(F,{children:[(0,r.BX)(T,{name:"needs_initialization",children:[(0,r.tZ)(I,{status:"fetching",children:(0,r.tZ)(a.Spinner,{sx:{margin:"auto"}})}),(0,r.tZ)(I,{status:"invalid_plan_change",children:(0,r.tZ)(j,{})}),(0,r.tZ)(I,{status:"missing_payer_email",children:(0,r.tZ)(N,{})}),(0,r.tZ)(I,{status:"error",children:(0,r.tZ)(E,{})})]}),(0,r.tZ)(T,{name:"completed",children:(0,r.tZ)(y,{})}),(0,r.tZ)(T,{name:"needs_confirmation",children:(0,r.tZ)(D,{})})]})]})})})})})},75058:function(e,t,o){o.d(t,{hG:()=>$,ph:()=>z,fC:()=>k,OL:()=>D}),o(65223);var r=o(79109),i=o(83799),n=o(69144),a=o(92418),l=o(2672),c=o(70431),s=o(19460),d=o(68487),u=o(68849),m=o(88870),p=o(11576),h=o(64204);let f=e=>(0,r.tZ)(h.Box,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),y=()=>(0,r.tZ)(f,{sx:e=>({height:e.space.$10,width:"100%"})}),g=e=>(0,r.tZ)(h.Flex,{direction:"col",gap:2,children:e.children}),x=()=>(0,r.tZ)(h.Box,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,r.BX)(h.Flex,{direction:"col",gap:5,children:[(0,r.BX)(g,{children:[(0,r.tZ)(f,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,r.tZ)(y,{})]}),(0,r.BX)(h.Grid,{columns:2,gap:4,children:[(0,r.BX)(g,{children:[(0,r.tZ)(f,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,r.tZ)(y,{})]}),(0,r.BX)(g,{children:[(0,r.tZ)(f,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,r.tZ)(y,{})]})]}),(0,r.BX)(g,{children:[(0,r.tZ)(f,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,r.tZ)(y,{})]}),(0,r.BX)(g,{children:[(0,r.tZ)(f,{}),(0,r.tZ)(f,{}),(0,r.tZ)(f,{sx:{width:"66.666667%"}})]})]})}),[b,v]=(0,i.uH)("AddPaymentSourceRoot"),Z=e=>{let{children:t,checkout:o,...a}=e,l=(0,p.useSubscriberTypeContext)(),c=(0,n.useRef)(null),{t:s}=(0,h.useLocalizations)(),[d,m]=(0,n.useState)(void 0),[f,y]=(0,n.useState)(void 0),[g,x]=(0,n.useState)(void 0),v=(e=>{let t=(0,h.useAppearance)().parsedInternalTheme;return(0,n.useMemo)(()=>{if(!e)return;let{colors:o,fontWeights:r,fontSizes:i,radii:n,space:a}=t;return{colorPrimary:(0,u.Aj)(e,o.$primary500,o.$colorBackground),colorBackground:(0,u.Aj)(e,o.$colorInput,o.$colorBackground),colorText:(0,u.Aj)(e,o.$colorForeground,o.$colorBackground),colorTextSecondary:(0,u.Aj)(e,o.$colorMutedForeground,o.$colorBackground),colorSuccess:(0,u.Aj)(e,o.$success500,o.$colorBackground),colorDanger:(0,u.Aj)(e,o.$danger500,o.$colorBackground),colorWarning:(0,u.Aj)(e,o.$warning500,o.$colorBackground),fontWeightNormal:(0,u.uj)(e,"font-weight",r.$normal.toString()),fontWeightMedium:(0,u.uj)(e,"font-weight",r.$medium.toString()),fontWeightBold:(0,u.uj)(e,"font-weight",r.$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])})(c.current);return(0,r.BX)(b.Provider,{value:{value:{headerTitle:d,headerSubtitle:f,submitLabel:g,setHeaderTitle:m,setHeaderSubtitle:y,setSubmitLabel:x,checkout:o,...a}},children:[(0,r.tZ)("div",{ref:c,style:{display:"none"}}),(0,r.tZ)(i.pe,{checkout:o,for:l,stripeAppearance:v,paymentDescription:s((0,h.localizationKeys)((null==o?void 0:o.planPeriod)==="month"?"commerce.paymentSource.applePayDescription.monthly":"commerce.paymentSource.applePayDescription.annual")),children:t})]})},S=e=>{let{isProviderReady:t}=(0,i.Wh)();return t?null:e.children},B=e=>{let{isProviderReady:t}=(0,i.Wh)();return t?(0,r.tZ)(r.HY,{children:e.children}):null},k=e=>{let{children:t,...o}=e;return(0,r.BX)(Z,{...o,children:[(0,r.tZ)(S,{children:(0,r.tZ)(h.Flex,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,r.tZ)(h.Spinner,{size:"lg",colorScheme:"primary",elementDescriptor:h.descriptors.spinner})})}),(0,r.tZ)(B,{children:(0,r.tZ)(_,{children:t})})]})},w=(e,t)=>{(0,n.useRef)(()=>{t(e)}),(0,n.useEffect)(()=>{t(e)},[e,t])},z=e=>{let{text:t}=e,{setHeaderTitle:o}=v();return w(t,o),null},$=e=>{let{text:t}=e,{setHeaderSubtitle:o}=v();return w(t,o),null},D=e=>{let{text:t}=e,{setSubmitLabel:o}=v();return w(t,o),null},_=e=>{let{children:t}=e,{headerTitle:o,headerSubtitle:n,submitLabel:u,checkout:f,onSuccess:y,cancelAction:g}=v(),b=(0,l.useCardState)(),Z=(0,p.useSubscriberTypeLocalizationRoot)(),{isFormReady:S,submit:B,reset:k}=(0,i.Wh)(),w=async e=>{e.preventDefault(),b.setLoading(),b.setError(void 0);let{data:t,error:o}=await B();if(!o)try{await y(t)}catch(e){(0,m.S3)(e,[],b.setError)}finally{b.setIdle(),k()}};return(0,r.tZ)(d.Y,{headerTitle:o,headerSubtitle:n,children:(0,r.BX)(c.l.Root,{onSubmit:w,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[t,(0,r.tZ)(i.Y7,{fallback:(0,r.tZ)(x,{})}),(0,r.tZ)(a.Z.Alert,{children:b.error}),(0,r.tZ)(s.A,{isDisabled:!S,submitLabel:null!=u?u:(0,h.localizationKeys)("".concat(Z,".billingPage.paymentSourcesSection.formButtonPrimary__add")),onReset:g,hideReset:!g,sx:{flex:f?1:void 0}})]})})}},57106:function(e,t,o){o.d(t,{j:()=>a});var r=o(79109),i=o(64204),n=o(96519);let a=e=>{let{paymentSource:t}=e;return(0,r.BX)(i.Flex,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:i.descriptors.paymentSourceRow,children:[(0,r.tZ)(i.Icon,{icon:"card"===t.paymentMethod?n.aB:n.Nn,sx:{alignSelf:"center"},elementDescriptor:i.descriptors.paymentSourceRowIcon}),(0,r.tZ)(i.Text,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:i.descriptors.paymentSourceRowType,children:"card"===t.paymentMethod?t.cardType:t.paymentMethod}),(0,r.tZ)(i.Text,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:i.descriptors.paymentSourceRowValue,children:"card"===t.paymentMethod?"⋯ ".concat(t.last4):null}),t.isDefault&&(0,r.tZ)(i.Badge,{elementDescriptor:i.descriptors.paymentSourceRowBadge,elementId:i.descriptors.paymentSourceRowBadge.setId("default"),localizationKey:(0,i.localizationKeys)("badge__default")}),"expired"===t.status&&(0,r.tZ)(i.Badge,{elementDescriptor:i.descriptors.paymentSourceRowBadge,elementId:i.descriptors.paymentSourceRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,i.localizationKeys)("badge__expired")})]})}},99140:function(e,t,o){o.d(t,{_:()=>S}),o(92037),o(28419);var r=o(79109),i=o(83799),n=o(69144),a=o(2672),l=o(70431),c=o(19460),s=o(68487),d=o(88870),u=o(36788),m=o(8969),p=o(11576),h=o(17703),f=o(10207);o(50725);var y=o(24676),g=o(93344),x=o(64204),b=o(12464);let v=e=>{let{navigate:t}=(0,y.useRouter)(),{email:o,nextStep:i,onReset:l}=e,s=(0,a.useCardState)(),u=(0,p.useUserProfileContext)(),{startEnterpriseSSOLinkFlow:m}=(0,b.eq)(o);async function h(){var e;await t((null==(e=o.verification.externalVerificationRedirectURL)?void 0:e.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,r.BX)(r.HY,{children:[(0,r.tZ)(x.Flex,{justify:"center",children:(0,r.tZ)(x.Button,{variant:"link",onClick:h,localizationKey:(0,x.localizationKeys)("userProfile.emailAddressPage.enterpriseSSOLink.formButton")})}),(0,r.tZ)(c.K,{children:(0,r.tZ)(x.Button,{variant:"ghost",localizationKey:(0,x.localizationKeys)("userProfile.formButtonReset"),elementDescriptor:x.descriptors.formButtonReset,onClick:l})})]})};var Z=o(12786);let S=(0,a.withCardStateProvider)(e=>{var t,o;let{emailId:y,onSuccess:g,onReset:x,disableAutoFocus:b=!1}=e,S=(0,a.useCardState)(),{user:w}=(0,i.aF)(),z=(0,p.useEnvironment)(),$=(0,i.WZ)(e=>null==w?void 0:w.createEmailAddress({email:e})),D=n.useRef(null==w?void 0:w.emailAddresses.find(e=>e.id===y)),_=k(D.current,z),C=(0,m.a2)({defaultStep:+!!D.current,onNextStep:()=>S.setError(void 0)}),K=(0,u.Yp)("emailAddress","",{type:"email",label:(0,h.u1)("formFieldLabel__emailAddress"),placeholder:(0,h.u1)("formFieldInputPlaceholder__emailAddress"),isRequired:!0}),P=K.value.length>1&&(null==w?void 0:w.username)!==K.value,R=async e=>{if(e.preventDefault(),w)return $(K.value).then(e=>{D.current=e,C.nextStep()}).catch(e=>(0,d.S3)(e,[K],S.setError))},A=B(_);return(0,r.BX)(m.en,{...C.props,children:[(0,r.tZ)(s.Y,{headerTitle:e.title||(0,h.u1)("userProfile.emailAddressPage.title"),headerSubtitle:e.subtitle||(0,h.u1)("userProfile.emailAddressPage.formHint"),children:(0,r.BX)(l.l.Root,{onSubmit:R,children:[(0,r.tZ)(l.l.ControlRow,{elementId:K.id,children:(0,r.tZ)(l.l.PlainInput,{...K.props,autoFocus:!b})}),(0,r.tZ)(c.A,{submitLabel:(0,h.u1)("userProfile.formButtonPrimary__add"),isDisabled:!P,onReset:x})]})}),(0,r.BX)(s.Y,{headerTitle:(0,h.u1)("userProfile.emailAddressPage.verifyTitle"),headerSubtitle:(0,h.u1)("".concat(A,".formSubtitle"),{identifier:(null==(t=D.current)?void 0:t.emailAddress)||""}),children:["email_link"===_&&(0,r.tZ)(Z.K,{nextStep:g,email:D.current,onReset:x}),"email_code"===_&&(0,r.tZ)(f.H,{nextStep:g,identification:D.current,identifier:null==(o=D.current)?void 0:o.emailAddress,prepareVerification:()=>{var e;return null==(e=D.current)?void 0:e.prepareVerification({strategy:"email_code"})},onReset:x}),"enterprise_sso"===_&&(0,r.tZ)(v,{nextStep:g,email:D.current,onReset:x})]})]})}),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: ".concat(e))}},k=(e,t)=>(null==e?void 0:e.matchesSsoConnection)?"enterprise_sso":!function(e){let{userSettings:t}=e,{email_address:o}=t.attributes;return!!((null==o?void 0:o.enabled)&&(null==o?void 0:o.verifications.includes("email_link")))}(t)?"email_code":"email_link"},10207:function(e,t,o){o.d(t,{H:()=>u});var r=o(79109),i=o(69144),n=o(12667),a=o(2672),l=o(70431),c=o(19460),s=o(88870),d=o(64204);let u=e=>{let t=(0,a.useCardState)(),{nextStep:o,identification:u,identifier:m,onReset:p,prepareVerification:h}=e,f=()=>{var e;return null==h||null==(e=h())?void 0:e.catch(e=>(0,s.S3)(e,[],t.setError))},y=(0,n.e3)({onCodeEntryFinished:(e,t,o)=>{null==u||u.attemptVerification({code:e}).then(()=>t()).catch(o)},onResendCodeClicked:f,onResolve:o});return i.useEffect(()=>{f()},[]),(0,r.BX)(r.HY,{children:[(0,r.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,r.BX)(c.K,{children:[(0,r.tZ)(d.Button,{isLoading:y.isLoading,localizationKey:(0,d.localizationKeys)("formButtonPrimary__verify"),elementDescriptor:d.descriptors.formButtonPrimary,onClick:y.onFakeContinue}),(0,r.tZ)(d.Button,{variant:"ghost",isDisabled:y.isLoading,localizationKey:(0,d.localizationKeys)("userProfile.formButtonReset"),elementDescriptor:d.descriptors.formButtonReset,onClick:p})]})]})}},12786:function(e,t,o){o.d(t,{K:()=>h,M:()=>f});var r=o(79109),i=o(69144),n=o(2672),a=o(19460),l=o(65495),c=o(88870),s=o(8969),d=o(56749),u=o(11576),m=o(64204),p=o(12464);let h=e=>{let{email:t,nextStep:o,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(()=>o()).catch(e=>(0,c.S3)(e,[],h.setError))}return i.useEffect(()=>{x()},[]),(0,r.BX)(r.HY,{children:[(0,r.tZ)(l.V,{resendButton:(0,m.localizationKeys)("userProfile.emailAddressPage.emailLink.resendButton"),onResendCodeClicked:x}),(0,r.tZ)(a.K,{children:(0,r.tZ)(m.Button,{variant:"ghost",localizationKey:(0,m.localizationKeys)("userProfile.formButtonReset"),elementDescriptor:m.descriptors.formButtonReset,onClick:s})})]})},f=()=>(0,r.tZ)(s.Ej,{title:(0,m.localizationKeys)("signUp.emailLink.verifiedSwitchTab.title"),subtitle:(0,m.localizationKeys)("signUp.emailLink.verifiedSwitchTab.subtitle"),status:"verified"})}}]);