@clerk/ui 1.0.0-canary.v20251219163248 → 1.0.0-canary.v20251219180306

package/dist/ClerkUi.js

@@ -2,8 +2,8 @@ import { mountComponentRenderer } from "./Components.js";
 
 //#region src/ClerkUi.ts
 var ClerkUi = class {
-	static version = "1.0.0-canary.v20251219163248";
-	version = "1.0.0-canary.v20251219163248";
+	static version = "1.0.0-canary.v20251219180306";
+	version = "1.0.0-canary.v20251219180306";
 	#componentRenderer;
 	constructor(getClerk, getEnvironment, options, moduleManager) {
 		this.#componentRenderer = mountComponentRenderer(getClerk, getEnvironment, options, moduleManager);

package/dist/{checkout_ui_6ee94f_1.0.0-canary.v20251219163248.js → checkout_ui_d56036_1.0.0-canary.v20251219180306.js}

@@ -1 +1 @@
-"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["256"],{12677:function(e,t,r){r.r(t),r.d(t,{Checkout:()=>ec});var o=r(14518),n=r(78532),i=r(46256);r(98114);var a=r(14173),l=r(21210),c=r(35074),s=r(62366);let d=(0,c.createContext)(null),u=()=>{let e=(0,c.useContext)(d),t=(0,l.ho)(),r=(0,s.II)();if(!e||"Checkout"!==e.componentName)throw Error("Clerk: useCheckoutContext called outside Checkout.");let o=(0,c.useMemo)(()=>{var o;if(e.portalRoot)return;let n=e.newSubscriptionRedirectUrl||(null==(o=t.buildNewSubscriptionRedirectUrl)?void 0:o.call(t));return(0,a.vU)(null==r?void 0:r.allowedRedirectOrigins,window.location.origin)(n)?n:void 0},[e.portalRoot,e.newSubscriptionRedirectUrl,t,null==r?void 0:r.allowedRedirectOrigins]),{componentName:n,...i}=e;return{...i,componentName:n,newSubscriptionRedirectUrl:o}};var p=r(44607),h=r(22861),m=r(18272);r(88711),r(19161),r(22239);var g=r(29436),y=r(80137),f=r(58920),b=r(16580),Y=r(84091),D=r(60359),$=r(4964);let v=e=>e[0].toUpperCase()+e.slice(1),x=(e,t,r)=>e+(t-e)*r,w=e=>{let{positionX:t,positionY:r}=e,n=(0,c.useRef)(null),[i,a]=(0,c.useState)({x:256,y:256}),l="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;(0,c.useEffect)(()=>{if(!l)return;let e=()=>{a(e=>({x:x(e.x,t,.15),y:x(e.y,r,.15)})),n.current=requestAnimationFrame(e)};return n.current=requestAnimationFrame(e),()=>{n.current&&cancelAnimationFrame(n.current)}},[t,r,l]);let s=(0,c.useId)(),d=(0,c.useId)(),u=(0,c.useId)();return(0,o.FD)(m.az,{elementDescriptor:f.$z.checkoutSuccessRings,as:"svg",viewBox:"0 0 512 512",sx:{position:"absolute",inset:0,pointerEvents:"none"},"aria-hidden":!0,children:[(0,o.FD)("defs",{children:[(0,o.FD)("radialGradient",{id:"clerk-checkout-success-gradient",children:[(0,o.Y)("stop",{offset:"0%",style:{stopColor:"var(--ring-highlight)"}}),(0,o.Y)("stop",{offset:"100%",stopOpacity:"0",style:{stopColor:"var(--ring-highlight)"}})]}),(0,o.Y)("filter",{id:"clerk-checkout-success-blur-effect",children:(0,o.Y)("feGaussianBlur",{stdDeviation:"10"})}),[{r:225,maskStart:10,maskEnd:90,id:s},{r:162.5,maskStart:15,maskEnd:85,id:d},{r:100,maskStart:20,maskEnd:80,id:u}].map(e=>{let{maskStart:t,maskEnd:r,id:n}=e;return(0,o.FD)("linearGradient",{id:"gradient-".concat(n),x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[(0,o.Y)("stop",{offset:"".concat(t+5,"%"),stopColor:"white",stopOpacity:"0"}),(0,o.Y)("stop",{offset:"".concat(t+35,"%"),stopColor:"white",stopOpacity:"1"}),(0,o.Y)("stop",{offset:"".concat(r-35,"%"),stopColor:"white",stopOpacity:"1"}),(0,o.Y)("stop",{offset:"".concat(r-5,"%"),stopColor:"white",stopOpacity:"0"})]},n)}),(0,o.Y)("mask",{id:"clerk-checkout-success-mask",children:[{r:225,id:s},{r:162.5,id:d},{r:100,id:u}].map(e=>{let{r:t,id:r}=e;return(0,o.Y)("circle",{cx:"256",cy:"256",r:t,stroke:"url(#gradient-".concat(r,")"),fill:"none",strokeWidth:"1"},r)})})]}),(0,o.FD)("g",{mask:"url(#clerk-checkout-success-mask)",children:[(0,o.Y)("rect",{width:"512",height:"512",style:{fill:"var(--ring-fill)"}}),l&&(0,o.Y)("rect",{id:"movingGradientHighlight",width:"256",height:"256",x:i.x-128,y:i.y-128,fill:"url(#clerk-checkout-success-gradient)",filter:"url(#clerk-checkout-success-blur-effect)"})]})]})},k=()=>{let e=(0,$.r)(),{setIsOpen:t}=(0,n.g)(),{newSubscriptionRedirectUrl:r}=u(),{checkout:i}=(0,l.v$)(),{totals:a,paymentMethod:s,planPeriodStart:d,freeTrialEndsAt:p}=i,[x,k]=(0,c.useState)({x:256,y:256}),F=(0,D.j)(),{animations:_}=(0,b.K)().parsedOptions,S=!F&&!0===_,z=(0,c.useRef)(null),G="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;return a?(0,o.FD)(o.FK,{children:[(0,o.Y)(n.Drawer.Body,{children:(0,o.FD)(m.L9,{elementDescriptor:f.$z.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(Y.wz.slowest,"ms"),animationTimingFunction:Y._8.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}},...!S&&{animation:"none",opacity:1}}),ref:z,onMouseMove:e=>{if(G&&z.current){let t=z.current.getBoundingClientRect(),r=e.clientX-t.left,o=e.clientY-t.top,n=t.width;n>0?k({x:r/n*512,y:o/n*512}):k({x:256,y:256})}},children:[(0,o.Y)(w,{positionX:x.x,positionY:x.y}),(0,o.FD)(m.az,{elementDescriptor:f.$z.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:G?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.Y)("svg",{fill:"none",viewBox:"0 0 10 10","aria-hidden":"true",style:{position:"relative",margin:"auto",width:"1rem",height:"1rem"},children:(0,o.Y)("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:S?"check ".concat(Y.wz.drawer,"ms ").concat(Y._8.bezier," forwards ").concat(Y.wz.slow,"ms"):"none",...!S&&{strokeDashoffset:"0"}}})}),(0,o.Y)("style",{children:"\n              @keyframes check {\n                0% {\n                  stroke-dashoffset: 1;\n                }\n                100% {\n                  stroke-dashoffset: 0;\n                }\n            "})]}),(0,o.FD)(m.L9,{sx:e=>({margin:"auto",gridArea:"1/1",position:"relative",textAlign:"center",transform:"translateY(".concat(e.space.$20,")")}),children:[(0,o.Y)(m.DZ,{elementDescriptor:f.$z.checkoutSuccessTitle,as:"h2",textVariant:"h2",localizationKey:p?(0,h.G)("billing.checkout.title__trialSuccess"):a.totalDueNow.amount>0?(0,h.G)("billing.checkout.title__paymentSuccessful"):(0,h.G)("billing.checkout.title__subscriptionSuccessful"),sx:e=>({opacity:0,animationName:"slideUp",animationDuration:"".concat(Y.wz.slowest,"ms"),animationTimingFunction:Y._8.bezier,animationFillMode:"forwards",color:e.colors.$colorForeground,"@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}})}),(0,o.Y)(m.EY,{elementDescriptor:f.$z.checkoutSuccessDescription,colorScheme:"secondary",sx:e=>({textAlign:"center",paddingInline:e.space.$8,marginBlockStart:e.space.$2,opacity:0,animationName:"slideUp",animationDuration:"".concat(1.5*Y.wz.slowest,"ms"),animationTimingFunction:Y._8.bezier,animationFillMode:"forwards","@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}}),localizationKey:a.totalDueNow.amount>0?(0,h.G)("billing.checkout.description__paymentSuccessful"):(0,h.G)("billing.checkout.description__subscriptionSuccessful")})]})]})}),(0,o.FD)(n.Drawer.Footer,{sx:e=>({rowGap:e.space.$4,animationName:"footerSlideInUp",animationDuration:"".concat(Y.wz.drawer,"ms"),animationTimingFunction:Y._8.bezier,"@keyframes footerSlideInUp":{"0%":{transform:"translateY(100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{animation:"none"}}),children:[(0,o.FD)(g.p.Root,{children:[(0,o.FD)(g.p.Group,{variant:"secondary",children:[(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__totalPaid")}),(0,o.Y)(g.p.Description,{text:"".concat(a.totalDueNow.currencySymbol).concat(a.totalDueNow.amountFormatted)})]}),p?(0,o.FD)(g.p.Group,{variant:"secondary",children:[(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__freeTrialEndsAt")}),(0,o.Y)(g.p.Description,{text:(0,y.Y)(p)})]}):null,(0,o.FD)(g.p.Group,{variant:"secondary",children:[(0,o.Y)(g.p.Title,{title:a.totalDueNow.amount>0||null!==p?(0,h.G)("billing.checkout.lineItems.title__paymentMethod"):(0,h.G)("billing.checkout.lineItems.title__subscriptionBegins")}),(0,o.Y)(g.p.Description,{text:a.totalDueNow.amount>0||null!==p?s?"card"!==s.paymentType?s.paymentType?"".concat(v(s.paymentType)):"–":s.cardType?"".concat(v(s.cardType)," ⋯ ").concat(s.last4):"–":"–":d?(0,y.Y)(new Date(d)):"–"})]})]}),(0,o.Y)(m.$n,{onClick:()=>{r&&e.navigate(r),t&&t(!1)},localizationKey:(0,h.G)("formButtonPrimary")})]})]}):null};r(85074);var F=r(23707),_=r(63269),S=r(76839),z=r(41586),G=r(96455),T=r(4468),M=r(90625),R=r(97288),C=r(89068),B=r(98023),A=r(13450),I=r(53369),E=r(13679);let P=e=>e[0].toUpperCase()+e.slice(1),N="payment_method_id",L=(0,_.dm)(()=>{var e,t,r,i,a,c;let{checkout:s}=(0,l.v$)(),{plan:d,totals:u,isImmediatePlanChange:p,planPeriod:y,freeTrialEndsAt:b}=s;if(!d)return null;let Y=!!(null==(e=u.credit)?void 0:e.amount)&&u.credit.amount>0,D=!!(null==(t=u.pastDue)?void 0:t.amount)&&u.pastDue.amount>0,$="month"===y?d.fee:d.annualMonthlyFee;return(0,o.FD)(n.Drawer.Body,{children:[(0,o.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,o.FD)(g.p.Root,{children:[(0,o.FD)(g.p.Group,{children:[(0,o.Y)(g.p.Title,{title:d.name,description:"annual"===y?(0,h.G)("billing.billedAnnually"):void 0,badge:d.freeTrialEnabled&&b?(0,o.Y)(E.V,{subscription:{status:"free_trial"}}):null}),(0,o.Y)(g.p.Description,{prefix:"annual"===y?"x12":void 0,text:"".concat($.currencySymbol).concat($.amountFormatted),suffix:(0,h.G)("billing.checkout.perMonth")})]}),(0,o.FD)(g.p.Group,{borderTop:!0,variant:"tertiary",children:[(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.subtotal")}),(0,o.Y)(g.p.Description,{text:"".concat(u.subtotal.currencySymbol).concat(u.subtotal.amountFormatted)})]}),Y&&(0,o.FD)(g.p.Group,{variant:"tertiary",children:[(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.creditRemainder")}),(0,o.Y)(g.p.Description,{text:"- ".concat(null==(r=u.credit)?void 0:r.currencySymbol).concat(null==(i=u.credit)?void 0:i.amountFormatted)})]}),D&&(0,o.FD)(g.p.Group,{variant:"tertiary",children:[(0,o.FD)(G.m_.Root,{children:[(0,o.Y)(G.m_.Trigger,{children:(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.pastDue"),icon:C.A})}),(0,o.Y)(G.m_.Content,{text:(0,h.G)("billing.checkout.pastDueNotice")})]}),(0,o.Y)(g.p.Description,{text:"".concat(null==(a=u.pastDue)?void 0:a.currencySymbol).concat(null==(c=u.pastDue)?void 0:c.amountFormatted)})]}),!!b&&!!d.freeTrialDays&&u.totalDueAfterFreeTrial&&(0,o.FD)(g.p.Group,{variant:"tertiary",children:[(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.totalDueAfterTrial",{days:d.freeTrialDays})}),(0,o.Y)(g.p.Description,{text:"".concat(u.totalDueAfterFreeTrial.currencySymbol).concat(u.totalDueAfterFreeTrial.amountFormatted)})]}),(0,o.FD)(g.p.Group,{borderTop:!0,children:[(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.totalDueToday")}),(0,o.Y)(g.p.Description,{text:"".concat(u.totalDueNow.currencySymbol).concat(u.totalDueNow.amountFormatted)})]})]})}),!p&&(0,o.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({paddingBlockStart:e.space.$4,paddingInline:e.space.$4}),children:(0,o.Y)(m.EY,{localizationKey:(0,h.G)("billing.checkout.downgradeNotice"),variant:"caption",colorScheme:"secondary"})}),(0,o.Y)(K,{})]})}),W=()=>{let{onSubscriptionComplete:e}=u(),{checkout:t}=(0,l.v$)(),r=(0,_.f0)();if("needs_confirmation"!==t.status)throw Error("Checkout not found");let o=async o=>{r.setLoading(),r.setError(void 0);let{error:n}=await t.confirm(o);n?(0,T.H4)(n,[],r.setError):null==e||e(),r.setIdle()};return{payWithExistingPaymentMethod:e=>(e.preventDefault(),o({paymentMethodId:new FormData(e.currentTarget).get(N)})),addPaymentMethodAndPay:e=>o(e),payWithTestCard:()=>o({gateway:"stripe",useTestCard:!0}),payWithoutPaymentMethod:e=>(e.preventDefault(),o({}))}},K=()=>{let{checkout:e}=(0,l.v$)(),{plan:t}=e,{isLoading:r}=(0,R.mu)();return t?r?(0,o.Y)(m.y$,{sx:{margin:"auto"}}):(0,o.Y)(U,{}):null},U=()=>{let{checkout:e}=(0,l.v$)(),{plan:t,isImmediatePlanChange:r,needsPaymentMethod:n}=e,{data:i}=(0,R.mu)(),[a,s]=(0,c.useState)(()=>i.length>0?"existing":"new");return t?(0,o.FD)(m.fv,{elementDescriptor:f.$z.checkoutFormElementsRoot,gap:4,sx:e=>({padding:e.space.$4}),children:[(0,o.Y)(o.FK,{children:i.length>0&&r&&n&&(0,o.FD)(S.I.Root,{"aria-label":"Payment method source",value:a,onChange:e=>s(e),size:"lg",fullWidth:!0,children:[(0,o.Y)(S.I.Button,{value:"existing",text:(0,h.G)("billing.paymentMethods__label")}),(0,o.Y)(S.I.Button,{value:"new",text:(0,h.G)("billing.addPaymentMethod__label")})]})}),n?"existing"===a?(0,o.Y)(Z,{paymentMethods:i}):"new"===a&&(0,o.Y)(j,{}):(0,o.Y)(V,{})]}):null},J=()=>{let{isLoading:e}=(0,_.f0)(),{payWithTestCard:t}=W();return(0,o.FD)(m.az,{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.Y)(m.az,{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,o.FD)(m.so,{sx:e=>({alignItems:"center",justifyContent:"center",flexDirection:"column",rowGap:e.space.$2}),children:[(0,o.Y)(m.EY,{sx:e=>({color:e.colors.$warning500,fontWeight:e.fontWeights.$semibold}),localizationKey:(0,h.G)("billing.paymentMethod.dev.developmentMode")}),(0,o.Y)(m.$n,{type:"button",block:!0,variant:"bordered",localizationKey:(0,h.G)("userProfile.billingPage.paymentMethodsSection.payWithTestCardButton"),colorScheme:"secondary",isLoading:e,onClick:t})]})]})},O=()=>{let{checkout:e}=(0,l.v$)(),{status:t,freeTrialEndsAt:r,totals:o}=e;if("needs_initialization"===t)throw Error("Clerk: Invalid state");return r?(0,h.G)("billing.startFreeTrial"):o.totalDueNow.amount>0?(0,h.G)("billing.pay",{amount:"".concat(o.totalDueNow.currencySymbol).concat(o.totalDueNow.amountFormatted)}):(0,h.G)("billing.subscribe")},V=(0,_.dm)(()=>{let{for:e}=u(),{payWithoutPaymentMethod:t}=W(),r=(0,_.f0)();return(0,o.FD)(m.lV,{onSubmit:t,sx:X,children:[(0,o.Y)(F.Z.Alert,{children:r.error}),(0,o.Y)(H,{})]})}),j=(0,_.dm)(()=>{let{addPaymentMethodAndPay:e}=W(),t=O(),{checkout:r}=(0,l.v$)();return(0,o.FD)(A.bL,{onSuccess:e,checkout:r,children:[(0,o.Y)(M.W,{children:(0,o.Y)(J,{})}),(0,o.Y)(A.pr,{text:t})]})}),H=e=>{let t=(0,_.f0)(),r=O();return(0,o.Y)(m.$n,{type:"submit",colorScheme:"primary",size:"sm",textVariant:"buttonLarge",sx:{width:"100%"},isLoading:t.isLoading,localizationKey:r,...e})},X=e=>({display:"flex",flexDirection:"column",rowGap:e.space.$4}),Z=(0,_.dm)(e=>{let{paymentMethods:t}=e,{checkout:r}=(0,l.v$)(),{paymentMethod:n,isImmediatePlanChange:i,needsPaymentMethod:a}=r,{payWithExistingPaymentMethod:s}=W(),d=(0,_.f0)(),[u,p]=(0,c.useState)(n||t.find(e=>e.isDefault)),h=(0,c.useMemo)(()=>t.map(e=>{let t="card"!==e.paymentType?e.paymentType?"".concat(P(e.paymentType)):"–":e.cardType?"".concat(P(e.cardType)," ⋯ ").concat(e.last4):"–";return{value:e.id,label:t}}),[t]);return(0,o.FD)(m.lV,{onSubmit:s,sx:X,children:[i&&a?(0,o.FD)(z.l6,{elementId:"paymentMethod",options:h,value:(null==u?void 0:u.id)||null,onChange:e=>{p(t.find(t=>t.id===e.value))},portal:!0,children:[(0,o.Y)("input",{name:N,type:"hidden",value:null==u?void 0:u.id}),(0,o.Y)(z.JC,{icon:B.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),children:u&&(0,o.Y)(I.O,{paymentMethod:u})}),(0,o.Y)(z.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]}):(0,o.Y)("input",{name:N,type:"hidden",value:null==u?void 0:u.id}),(0,o.Y)(F.Z.Alert,{children:d.error}),(0,o.Y)(H,{})]})});r(65331),r(32069),r(30945);let q=()=>{let{checkout:e}=(0,l.v$)();return(0,c.useEffect)(()=>{e.start()},[]),null},Q=e=>{let{children:t}=e,{planId:r,planPeriod:n,for:i}=u();return(0,o.FD)(l.Rx,{for:i,planId:r,planPeriod:n,children:[(0,o.Y)(q,{}),t]})},ee=e=>{let{children:t,name:r}=e,{checkout:o}=(0,l.v$)();return o.status!==r?null:t},et=e=>{let{children:t,status:r}=e,{errors:o,fetchStatus:n}=(0,l.v$)();return(0,c.useMemo)(()=>{if(o.global){let e=o.global.flatMap(e=>{if(e.isClerkApiResponseError())return e.errors.map(e=>e.code)});return e.includes("missing_payer_email")?"missing_payer_email":e.includes("invalid_plan_change")?"invalid_plan_change":"generic_error"}return n},[n])!==r?null:t};r(95055);var er=r(78036),eo=r(10078),en=r(32336);let ei=()=>{let{errors:e}=(0,l.v$)(),{translateError:t}=(0,eo._)(),{t:r}=(0,eo._)();return(0,o.Y)(n.Drawer.Body,{children:(0,o.Y)(m.so,{align:"center",justify:"center",sx:e=>({height:"100%",padding:e.space.$4,fontSize:e.fontSizes.$md}),children:(0,o.Y)(er.F,{variant:"danger",colorScheme:"danger",children:e.global?t(e.global[0]):r((0,h.G)("unstable__errors.form_param_value_invalid"))})})})},ea=()=>{var e;let{planPeriod:t}=u(),{errors:r}=(0,l.v$)(),i=null==r||null==(e=r.global)?void 0:e.filter(e=>e.isClerkApiResponseError()).flatMap(e=>e.errors).find(e=>"invalid_plan_change"===e.code);if(!i)return null;let{plan:a,isPlanUpgradePossible:c}=(null==i?void 0:i.meta)||{};return(0,o.Y)(n.Drawer.Body,{children:(0,o.FD)(m.so,{gap:4,direction:"col",children:[(0,o.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,o.Y)(g.p.Root,{children:(0,o.FD)(g.p.Group,{children:[(0,o.Y)(g.p.Title,{title:a.name,description:"annual"===t?(0,h.G)("billing.billedAnnually"):void 0}),(0,o.Y)(g.p.Description,{prefix:"annual"===t?"x12":void 0,text:"".concat(a.currency_symbol).concat("month"===t?a.amount_formatted:a.annual_monthly_amount_formatted),suffix:(0,h.G)("billing.checkout.perMonth")})]})})}),(0,o.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,o.Y)(er.F,{variant:"info",colorScheme:"info",title:c?(0,h.G)("billing.cannotSubscribeMonthly"):(0,h.G)("billing.cannotSubscribeUnrecoverable")})})]})})},el=()=>{let{checkout:e}=(0,l.v$)(),{setIsOpen:t}=(0,n.g)();return(0,o.Y)(n.Drawer.Body,{children:(0,o.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,o.Y)(en.v,{title:(0,h.G)("billing.checkout.emailForm.title"),subtitle:(0,h.G)("billing.checkout.emailForm.subtitle"),onSuccess:()=>void e.start(),onReset:()=>t(!1),disableAutoFocus:!0})})})},ec=e=>(0,o.Y)(p.n.Root,{flow:"checkout",children:(0,o.Y)(p.n.Part,{children:(0,o.Y)(i.m$.Provider,{value:e.for||"user",children:(0,o.Y)(d.Provider,{value:{componentName:"Checkout",...e},children:(0,o.FD)(n.Drawer.Content,{children:[(0,o.Y)(n.Drawer.Header,{title:(0,h.G)("billing.checkout.title")}),(0,o.FD)(Q,{children:[(0,o.FD)(ee,{name:"needs_initialization",children:[(0,o.Y)(et,{status:"fetching",children:(0,o.Y)(m.y$,{sx:{margin:"auto"}})}),(0,o.Y)(et,{status:"invalid_plan_change",children:(0,o.Y)(ea,{})}),(0,o.Y)(et,{status:"missing_payer_email",children:(0,o.Y)(el,{})}),(0,o.Y)(et,{status:"generic_error",children:(0,o.Y)(ei,{})})]}),(0,o.Y)(ee,{name:"completed",children:(0,o.Y)(k,{})}),(0,o.Y)(ee,{name:"needs_confirmation",children:(0,o.Y)(L,{})})]})]})})})})})},13450:function(e,t,r){r.d(t,{pr:()=>M,L6:()=>T,Mo:()=>G,bL:()=>S}),r(88711);var o=r(14518),n=r(21210),i=r(35074),a=r(23707),l=r(63269),c=r(52454),s=r(11475),d=r(23549),u=r(38930),p=r(4468),h=r(46256),m=r(16580),g=r(10078),y=r(22861),f=r(18272),b=r(58920);let Y=e=>(0,o.Y)(f.az,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),D=()=>(0,o.Y)(Y,{sx:e=>({height:e.space.$10,width:"100%"})}),$=e=>(0,o.Y)(f.so,{direction:"col",gap:2,children:e.children}),v=()=>(0,o.Y)(f.az,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,o.FD)(f.so,{direction:"col",gap:5,children:[(0,o.FD)($,{children:[(0,o.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,o.Y)(D,{})]}),(0,o.FD)(f.xA,{columns:2,gap:4,children:[(0,o.FD)($,{children:[(0,o.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,o.Y)(D,{})]}),(0,o.FD)($,{children:[(0,o.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,o.Y)(D,{})]})]}),(0,o.FD)($,{children:[(0,o.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,o.Y)(D,{})]}),(0,o.FD)($,{children:[(0,o.Y)(Y,{}),(0,o.Y)(Y,{}),(0,o.Y)(Y,{sx:{width:"66.666667%"}})]})]})}),[x,w]=(0,n.e3)("AddPaymentMethodRoot"),k=e=>{var t;let r,{children:a,checkout:l,...c}=e,s=(0,h.XX)(),d=(0,i.useRef)(null),{t:p}=(0,g._)(),[f,b]=(0,i.useState)(void 0),[Y,D]=(0,i.useState)(void 0),[$,v]=(0,i.useState)(void 0),w=(t=d.current,r=(0,m.K)().parsedInternalTheme,(0,i.useMemo)(()=>{if(!t)return;let{colors:e,fontWeights:o,fontSizes:n,radii:i,space:a}=r;return{colorPrimary:(0,u.G3)(t,e.$primary500,e.$colorBackground),colorBackground:(0,u.G3)(t,e.$colorInput,e.$colorBackground),colorText:(0,u.G3)(t,e.$colorForeground,e.$colorBackground),colorTextSecondary:(0,u.G3)(t,e.$colorMutedForeground,e.$colorBackground),colorSuccess:(0,u.G3)(t,e.$success500,e.$colorBackground),colorDanger:(0,u.G3)(t,e.$danger500,e.$colorBackground),colorWarning:(0,u.G3)(t,e.$warning500,e.$colorBackground),fontWeightNormal:(0,u.yJ)(t,"font-weight",o.$normal.toString()),fontWeightMedium:(0,u.yJ)(t,"font-weight",o.$medium.toString()),fontWeightBold:(0,u.yJ)(t,"font-weight",o.$bold.toString()),fontSizeXl:(0,u.yJ)(t,"font-size",n.$xl),fontSizeLg:(0,u.yJ)(t,"font-size",n.$lg),fontSizeSm:(0,u.yJ)(t,"font-size",n.$md),fontSizeXs:(0,u.yJ)(t,"font-size",n.$sm),borderRadius:(0,u.yJ)(t,"border-radius",i.$lg),spacingUnit:(0,u.yJ)(t,"padding",a.$1)}},[r,t]));return(0,o.FD)(x.Provider,{value:{value:{headerTitle:f,headerSubtitle:Y,submitLabel:$,setHeaderTitle:b,setHeaderSubtitle:D,setSubmitLabel:v,checkout:l,...c}},children:[(0,o.Y)("div",{ref:d,style:{display:"none"}}),(0,o.Y)(n.Tn,{checkout:l,for:s,stripeAppearance:w,paymentDescription:p((0,y.G)((null==l?void 0:l.planPeriod)==="month"?"billing.paymentMethod.applePayDescription.monthly":"billing.paymentMethod.applePayDescription.annual")),children:a})]})},F=e=>{let{isProviderReady:t}=(0,n.Jl)();return t?null:e.children},_=e=>{let{isProviderReady:t}=(0,n.Jl)();return t?(0,o.Y)(o.FK,{children:e.children}):null},S=e=>{let{children:t,...r}=e;return(0,o.FD)(k,{...r,children:[(0,o.Y)(F,{children:(0,o.Y)(f.so,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,o.Y)(f.y$,{size:"lg",colorScheme:"primary",elementDescriptor:b.$z.spinner})})}),(0,o.Y)(_,{children:(0,o.Y)(R,{children:t})})]})},z=(e,t)=>{(0,i.useRef)(()=>{t(e)}),(0,i.useEffect)(()=>{t(e)},[e,t])},G=e=>{let{text:t}=e,{setHeaderTitle:r}=w();return z(t,r),null},T=e=>{let{text:t}=e,{setHeaderSubtitle:r}=w();return z(t,r),null},M=e=>{let{text:t}=e,{setSubmitLabel:r}=w();return z(t,r),null},R=e=>{let{children:t}=e,{headerTitle:r,headerSubtitle:i,submitLabel:u,checkout:m,onSuccess:g,cancelAction:f}=w(),b=(0,l.f0)(),Y=(0,h.N7)(),{isFormReady:D,submit:$,reset:x}=(0,n.Jl)(),k=async e=>{e.preventDefault(),b.setLoading(),b.setError(void 0);let{data:t,error:r}=await $();if(!r)try{await g(t)}catch(e){(0,p.H4)(e,[],b.setError)}finally{b.setIdle(),x()}};return(0,o.Y)(d.M,{headerTitle:r,headerSubtitle:i,children:(0,o.FD)(c.l.Root,{onSubmit:k,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[t,(0,o.Y)(n.cl,{fallback:(0,o.Y)(v,{})}),(0,o.Y)(a.Z.Alert,{children:b.error}),(0,o.Y)(s.G,{isDisabled:!D,submitLabel:null!=u?u:(0,y.G)("".concat(Y,".billingPage.paymentMethodsSection.formButtonPrimary__add")),onReset:f,hideReset:!f,sx:{flex:m?1:void 0}})]})})}},53369:function(e,t,r){r.d(t,{O:()=>s});var o=r(14518),n=r(18272),i=r(58920),a=r(22861),l=r(14967),c=r(65203);let s=e=>{let{paymentMethod:t}=e;return(0,o.FD)(n.so,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:i.$z.paymentMethodRow,children:[(0,o.Y)(n.In,{icon:"card"===t.paymentType?l.A:c.A,sx:e=>({alignSelf:"center",color:e.colors.$colorMutedForeground}),elementDescriptor:i.$z.paymentMethodRowIcon}),(0,o.Y)(n.EY,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:i.$z.paymentMethodRowType,children:"card"===t.paymentType?t.cardType:t.paymentType}),(0,o.Y)(n.EY,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:i.$z.paymentMethodRowValue,children:"card"===t.paymentType?"⋯ ".concat(t.last4):null}),t.isDefault&&(0,o.Y)(n.Ex,{elementDescriptor:i.$z.paymentMethodRowBadge,elementId:i.$z.paymentMethodRowBadge.setId("default"),localizationKey:(0,a.G)("badge__default")}),"expired"===t.status&&(0,o.Y)(n.Ex,{elementDescriptor:i.$z.paymentMethodRowBadge,elementId:i.$z.paymentMethodRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,a.G)("badge__expired")})]})}},13679:function(e,t,r){r.d(t,{V:()=>c});var o=r(14518),n=r(18272),i=r(22861);let a={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan",free_trial:"badge__freeTrial"},l={active:"secondary",upcoming:"primary",past_due:"warning",free_trial:"secondary"},c=e=>{let{subscription:t,elementDescriptor:r}=e;return(0,o.Y)(n.Ex,{elementDescriptor:r,colorScheme:l[t.status],localizationKey:(0,i.G)(a[t.status])})}}}]);
+"use strict";(globalThis.webpackChunk_clerk_ui=globalThis.webpackChunk_clerk_ui||[]).push([["256"],{12677:function(e,t,r){r.r(t),r.d(t,{Checkout:()=>ec});var o=r(14518),n=r(78532),i=r(46256);r(98114);var a=r(14173),l=r(21210),c=r(35074),s=r(62366);let d=(0,c.createContext)(null),u=()=>{let e=(0,c.useContext)(d),t=(0,l.ho)(),r=(0,s.II)();if(!e||"Checkout"!==e.componentName)throw Error("Clerk: useCheckoutContext called outside Checkout.");let o=(0,c.useMemo)(()=>{var o;if(e.portalRoot)return;let n=e.newSubscriptionRedirectUrl||(null==(o=t.buildNewSubscriptionRedirectUrl)?void 0:o.call(t));return(0,a.vU)(null==r?void 0:r.allowedRedirectOrigins,window.location.origin)(n)?n:void 0},[e.portalRoot,e.newSubscriptionRedirectUrl,t,null==r?void 0:r.allowedRedirectOrigins]),{componentName:n,...i}=e;return{...i,componentName:n,newSubscriptionRedirectUrl:o}};var p=r(44607),h=r(22861),m=r(18272);r(88711),r(19161),r(22239);var g=r(29436),y=r(80137),f=r(58920),b=r(16580),Y=r(84091),D=r(60359),$=r(4964);let v=e=>e[0].toUpperCase()+e.slice(1),x=(e,t,r)=>e+(t-e)*r,w=e=>{let{positionX:t,positionY:r}=e,n=(0,c.useRef)(null),[i,a]=(0,c.useState)({x:256,y:256}),l="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;(0,c.useEffect)(()=>{if(!l)return;let e=()=>{a(e=>({x:x(e.x,t,.15),y:x(e.y,r,.15)})),n.current=requestAnimationFrame(e)};return n.current=requestAnimationFrame(e),()=>{n.current&&cancelAnimationFrame(n.current)}},[t,r,l]);let s=(0,c.useId)(),d=(0,c.useId)(),u=(0,c.useId)();return(0,o.FD)(m.az,{elementDescriptor:f.$z.checkoutSuccessRings,as:"svg",viewBox:"0 0 512 512",sx:{position:"absolute",inset:0,pointerEvents:"none"},"aria-hidden":!0,children:[(0,o.FD)("defs",{children:[(0,o.FD)("radialGradient",{id:"clerk-checkout-success-gradient",children:[(0,o.Y)("stop",{offset:"0%",style:{stopColor:"var(--ring-highlight)"}}),(0,o.Y)("stop",{offset:"100%",stopOpacity:"0",style:{stopColor:"var(--ring-highlight)"}})]}),(0,o.Y)("filter",{id:"clerk-checkout-success-blur-effect",children:(0,o.Y)("feGaussianBlur",{stdDeviation:"10"})}),[{r:225,maskStart:10,maskEnd:90,id:s},{r:162.5,maskStart:15,maskEnd:85,id:d},{r:100,maskStart:20,maskEnd:80,id:u}].map(e=>{let{maskStart:t,maskEnd:r,id:n}=e;return(0,o.FD)("linearGradient",{id:"gradient-".concat(n),x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[(0,o.Y)("stop",{offset:"".concat(t+5,"%"),stopColor:"white",stopOpacity:"0"}),(0,o.Y)("stop",{offset:"".concat(t+35,"%"),stopColor:"white",stopOpacity:"1"}),(0,o.Y)("stop",{offset:"".concat(r-35,"%"),stopColor:"white",stopOpacity:"1"}),(0,o.Y)("stop",{offset:"".concat(r-5,"%"),stopColor:"white",stopOpacity:"0"})]},n)}),(0,o.Y)("mask",{id:"clerk-checkout-success-mask",children:[{r:225,id:s},{r:162.5,id:d},{r:100,id:u}].map(e=>{let{r:t,id:r}=e;return(0,o.Y)("circle",{cx:"256",cy:"256",r:t,stroke:"url(#gradient-".concat(r,")"),fill:"none",strokeWidth:"1"},r)})})]}),(0,o.FD)("g",{mask:"url(#clerk-checkout-success-mask)",children:[(0,o.Y)("rect",{width:"512",height:"512",style:{fill:"var(--ring-fill)"}}),l&&(0,o.Y)("rect",{id:"movingGradientHighlight",width:"256",height:"256",x:i.x-128,y:i.y-128,fill:"url(#clerk-checkout-success-gradient)",filter:"url(#clerk-checkout-success-blur-effect)"})]})]})},k=()=>{let e=(0,$.r)(),{setIsOpen:t}=(0,n.g)(),{newSubscriptionRedirectUrl:r}=u(),{checkout:i}=(0,l.v$)(),{totals:a,paymentMethod:s,planPeriodStart:d,freeTrialEndsAt:p}=i,[x,k]=(0,c.useState)({x:256,y:256}),F=(0,D.j)(),{animations:_}=(0,b.K)().parsedOptions,S=!F&&!0===_,z=(0,c.useRef)(null),G="undefined"==typeof window||window.matchMedia("(hover: hover) and (pointer: fine)").matches;return a?(0,o.FD)(o.FK,{children:[(0,o.Y)(n.Drawer.Body,{children:(0,o.FD)(m.L9,{elementDescriptor:f.$z.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(Y.wz.slowest,"ms"),animationTimingFunction:Y._8.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}},...!S&&{animation:"none",opacity:1}}),ref:z,onMouseMove:e=>{if(G&&z.current){let t=z.current.getBoundingClientRect(),r=e.clientX-t.left,o=e.clientY-t.top,n=t.width;n>0?k({x:r/n*512,y:o/n*512}):k({x:256,y:256})}},children:[(0,o.Y)(w,{positionX:x.x,positionY:x.y}),(0,o.FD)(m.az,{elementDescriptor:f.$z.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:G?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.Y)("svg",{fill:"none",viewBox:"0 0 10 10","aria-hidden":"true",style:{position:"relative",margin:"auto",width:"1rem",height:"1rem"},children:(0,o.Y)("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:S?"check ".concat(Y.wz.drawer,"ms ").concat(Y._8.bezier," forwards ").concat(Y.wz.slow,"ms"):"none",...!S&&{strokeDashoffset:"0"}}})}),(0,o.Y)("style",{children:"\n              @keyframes check {\n                0% {\n                  stroke-dashoffset: 1;\n                }\n                100% {\n                  stroke-dashoffset: 0;\n                }\n            "})]}),(0,o.FD)(m.L9,{sx:e=>({margin:"auto",gridArea:"1/1",position:"relative",textAlign:"center",transform:"translateY(".concat(e.space.$20,")")}),children:[(0,o.Y)(m.DZ,{elementDescriptor:f.$z.checkoutSuccessTitle,as:"h2",textVariant:"h2",localizationKey:p?(0,h.G)("billing.checkout.title__trialSuccess"):a.totalDueNow.amount>0?(0,h.G)("billing.checkout.title__paymentSuccessful"):(0,h.G)("billing.checkout.title__subscriptionSuccessful"),sx:e=>({opacity:0,animationName:"slideUp",animationDuration:"".concat(Y.wz.slowest,"ms"),animationTimingFunction:Y._8.bezier,animationFillMode:"forwards",color:e.colors.$colorForeground,"@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}})}),(0,o.Y)(m.EY,{elementDescriptor:f.$z.checkoutSuccessDescription,colorScheme:"secondary",sx:e=>({textAlign:"center",paddingInline:e.space.$8,marginBlockStart:e.space.$2,opacity:0,animationName:"slideUp",animationDuration:"".concat(1.5*Y.wz.slowest,"ms"),animationTimingFunction:Y._8.bezier,animationFillMode:"forwards","@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}}),localizationKey:a.totalDueNow.amount>0?(0,h.G)("billing.checkout.description__paymentSuccessful"):(0,h.G)("billing.checkout.description__subscriptionSuccessful")})]})]})}),(0,o.FD)(n.Drawer.Footer,{sx:e=>({rowGap:e.space.$4,animationName:"footerSlideInUp",animationDuration:"".concat(Y.wz.drawer,"ms"),animationTimingFunction:Y._8.bezier,"@keyframes footerSlideInUp":{"0%":{transform:"translateY(100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{animation:"none"}}),children:[(0,o.FD)(g.p.Root,{children:[(0,o.FD)(g.p.Group,{variant:"secondary",children:[(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__totalPaid")}),(0,o.Y)(g.p.Description,{text:"".concat(a.totalDueNow.currencySymbol).concat(a.totalDueNow.amountFormatted)})]}),p?(0,o.FD)(g.p.Group,{variant:"secondary",children:[(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__freeTrialEndsAt")}),(0,o.Y)(g.p.Description,{text:(0,y.Y)(p)})]}):null,(0,o.FD)(g.p.Group,{variant:"secondary",children:[(0,o.Y)(g.p.Title,{title:a.totalDueNow.amount>0||null!==p?(0,h.G)("billing.checkout.lineItems.title__paymentMethod"):(0,h.G)("billing.checkout.lineItems.title__subscriptionBegins")}),(0,o.Y)(g.p.Description,{text:a.totalDueNow.amount>0||null!==p?s?"card"!==s.paymentType?s.paymentType?"".concat(v(s.paymentType)):"–":s.cardType?"".concat(v(s.cardType)," ⋯ ").concat(s.last4):"–":"–":d?(0,y.Y)(new Date(d)):"–"})]})]}),(0,o.Y)(m.$n,{onClick:()=>{r&&e.navigate(r),t&&t(!1)},localizationKey:(0,h.G)("formButtonPrimary")})]})]}):null};r(85074);var F=r(23707),_=r(63269),S=r(76839),z=r(41586),G=r(96455),T=r(4468),M=r(90625),R=r(97288),C=r(89068),B=r(98023),I=r(13450),A=r(53369),E=r(13679);let P=e=>e[0].toUpperCase()+e.slice(1),N="payment_method_id",L=(0,_.dm)(()=>{var e,t,r,i,a,c;let{checkout:s}=(0,l.v$)(),{plan:d,totals:u,isImmediatePlanChange:p,planPeriod:y,freeTrialEndsAt:b}=s;if(!d)return null;let Y=!!(null==(e=u.credit)?void 0:e.amount)&&u.credit.amount>0,D=!!(null==(t=u.pastDue)?void 0:t.amount)&&u.pastDue.amount>0,$="month"===y?d.fee:d.annualMonthlyFee;return(0,o.FD)(n.Drawer.Body,{children:[(0,o.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,o.FD)(g.p.Root,{children:[(0,o.FD)(g.p.Group,{children:[(0,o.Y)(g.p.Title,{title:d.name,description:"annual"===y?(0,h.G)("billing.billedAnnually"):void 0,badge:d.freeTrialEnabled&&b?(0,o.Y)(E.V,{subscription:{status:"free_trial"}}):null}),(0,o.Y)(g.p.Description,{prefix:"annual"===y?"x12":void 0,text:"".concat($.currencySymbol).concat($.amountFormatted),suffix:(0,h.G)("billing.checkout.perMonth")})]}),(0,o.FD)(g.p.Group,{borderTop:!0,variant:"tertiary",children:[(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.subtotal")}),(0,o.Y)(g.p.Description,{text:"".concat(u.subtotal.currencySymbol).concat(u.subtotal.amountFormatted)})]}),Y&&(0,o.FD)(g.p.Group,{variant:"tertiary",children:[(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.creditRemainder")}),(0,o.Y)(g.p.Description,{text:"- ".concat(null==(r=u.credit)?void 0:r.currencySymbol).concat(null==(i=u.credit)?void 0:i.amountFormatted)})]}),D&&(0,o.FD)(g.p.Group,{variant:"tertiary",children:[(0,o.FD)(G.m_.Root,{children:[(0,o.Y)(G.m_.Trigger,{children:(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.pastDue"),icon:C.A})}),(0,o.Y)(G.m_.Content,{text:(0,h.G)("billing.checkout.pastDueNotice")})]}),(0,o.Y)(g.p.Description,{text:"".concat(null==(a=u.pastDue)?void 0:a.currencySymbol).concat(null==(c=u.pastDue)?void 0:c.amountFormatted)})]}),!!b&&!!d.freeTrialDays&&u.totalDueAfterFreeTrial&&(0,o.FD)(g.p.Group,{variant:"tertiary",children:[(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.totalDueAfterTrial",{days:d.freeTrialDays})}),(0,o.Y)(g.p.Description,{text:"".concat(u.totalDueAfterFreeTrial.currencySymbol).concat(u.totalDueAfterFreeTrial.amountFormatted)})]}),(0,o.FD)(g.p.Group,{borderTop:!0,children:[(0,o.Y)(g.p.Title,{title:(0,h.G)("billing.totalDueToday")}),(0,o.Y)(g.p.Description,{text:"".concat(u.totalDueNow.currencySymbol).concat(u.totalDueNow.amountFormatted)})]})]})}),!p&&(0,o.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({paddingBlockStart:e.space.$4,paddingInline:e.space.$4}),children:(0,o.Y)(m.EY,{localizationKey:(0,h.G)("billing.checkout.downgradeNotice"),variant:"caption",colorScheme:"secondary"})}),(0,o.Y)(K,{})]})}),W=()=>{let{onSubscriptionComplete:e}=u(),{checkout:t}=(0,l.v$)(),r=(0,_.f0)();if("needs_confirmation"!==t.status)throw Error("Checkout not found");let o=async o=>{r.setLoading(),r.setError(void 0);let{error:n}=await t.confirm(o);n?(0,T.H4)(n,[],r.setError):null==e||e(),r.setIdle()};return{payWithExistingPaymentMethod:e=>(e.preventDefault(),o({paymentMethodId:new FormData(e.currentTarget).get(N)})),addPaymentMethodAndPay:e=>o(e),payWithTestCard:()=>o({gateway:"stripe",useTestCard:!0}),payWithoutPaymentMethod:e=>(e.preventDefault(),o({}))}},K=()=>{let{checkout:e}=(0,l.v$)(),{plan:t}=e,{isLoading:r}=(0,R.mu)();return t?r?(0,o.Y)(m.y$,{sx:{margin:"auto"}}):(0,o.Y)(U,{}):null},U=()=>{let{checkout:e}=(0,l.v$)(),{plan:t,isImmediatePlanChange:r,needsPaymentMethod:n}=e,{data:i}=(0,R.mu)(),[a,s]=(0,c.useState)(()=>i.length>0?"existing":"new");return t?(0,o.FD)(m.fv,{elementDescriptor:f.$z.checkoutFormElementsRoot,gap:4,sx:e=>({padding:e.space.$4}),children:[(0,o.Y)(o.FK,{children:i.length>0&&r&&n&&(0,o.FD)(S.I.Root,{"aria-label":"Payment method source",value:a,onChange:e=>s(e),size:"lg",fullWidth:!0,children:[(0,o.Y)(S.I.Button,{value:"existing",text:(0,h.G)("billing.paymentMethods__label")}),(0,o.Y)(S.I.Button,{value:"new",text:(0,h.G)("billing.addPaymentMethod__label")})]})}),n?"existing"===a?(0,o.Y)(Z,{paymentMethods:i}):"new"===a&&(0,o.Y)(j,{}):(0,o.Y)(V,{})]}):null},J=()=>{let{isLoading:e}=(0,_.f0)(),{payWithTestCard:t}=W();return(0,o.FD)(m.az,{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.Y)(m.az,{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,o.FD)(m.so,{sx:e=>({alignItems:"center",justifyContent:"center",flexDirection:"column",rowGap:e.space.$2}),children:[(0,o.Y)(m.EY,{sx:e=>({color:e.colors.$warning500,fontWeight:e.fontWeights.$semibold}),localizationKey:(0,h.G)("billing.paymentMethod.dev.developmentMode")}),(0,o.Y)(m.$n,{type:"button",block:!0,variant:"bordered",localizationKey:(0,h.G)("userProfile.billingPage.paymentMethodsSection.payWithTestCardButton"),colorScheme:"secondary",isLoading:e,onClick:t})]})]})},O=()=>{let{checkout:e}=(0,l.v$)(),{status:t,freeTrialEndsAt:r,totals:o}=e;if("needs_initialization"===t)throw Error("Clerk: Invalid state");return r?(0,h.G)("billing.startFreeTrial"):o.totalDueNow.amount>0?(0,h.G)("billing.pay",{amount:"".concat(o.totalDueNow.currencySymbol).concat(o.totalDueNow.amountFormatted)}):(0,h.G)("billing.subscribe")},V=(0,_.dm)(()=>{let{for:e}=u(),{payWithoutPaymentMethod:t}=W(),r=(0,_.f0)();return(0,o.FD)(m.lV,{onSubmit:t,sx:X,children:[(0,o.Y)(F.Z.Alert,{children:r.error}),(0,o.Y)(H,{})]})}),j=(0,_.dm)(()=>{let{addPaymentMethodAndPay:e}=W(),t=O(),{checkout:r}=(0,l.v$)();return(0,o.FD)(I.bL,{onSuccess:e,checkout:r,children:[(0,o.Y)(M.W,{children:(0,o.Y)(J,{})}),(0,o.Y)(I.pr,{text:t})]})}),H=e=>{let t=(0,_.f0)(),r=O();return(0,o.Y)(m.$n,{type:"submit",colorScheme:"primary",size:"sm",textVariant:"buttonLarge",sx:{width:"100%"},isLoading:t.isLoading,localizationKey:r,...e})},X=e=>({display:"flex",flexDirection:"column",rowGap:e.space.$4}),Z=(0,_.dm)(e=>{let{paymentMethods:t}=e,{checkout:r}=(0,l.v$)(),{paymentMethod:n,isImmediatePlanChange:i,needsPaymentMethod:a}=r,{payWithExistingPaymentMethod:s}=W(),d=(0,_.f0)(),[u,p]=(0,c.useState)(n||t.find(e=>e.isDefault)),h=(0,c.useMemo)(()=>t.map(e=>{let t="card"!==e.paymentType?e.paymentType?"".concat(P(e.paymentType)):"–":e.cardType?"".concat(P(e.cardType)," ⋯ ").concat(e.last4):"–";return{value:e.id,label:t}}),[t]);return(0,o.FD)(m.lV,{onSubmit:s,sx:X,children:[i&&a?(0,o.FD)(z.l6,{elementId:"paymentMethod",options:h,value:(null==u?void 0:u.id)||null,onChange:e=>{p(t.find(t=>t.id===e.value))},portal:!0,children:[(0,o.Y)("input",{name:N,type:"hidden",value:null==u?void 0:u.id}),(0,o.Y)(z.JC,{icon:B.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),children:u&&(0,o.Y)(A.O,{paymentMethod:u})}),(0,o.Y)(z.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]}):(0,o.Y)("input",{name:N,type:"hidden",value:null==u?void 0:u.id}),(0,o.Y)(F.Z.Alert,{children:d.error}),(0,o.Y)(H,{})]})});r(65331),r(32069),r(30945);let q=()=>{let{checkout:e}=(0,l.v$)();return(0,c.useEffect)(()=>{e.start()},[]),null},Q=e=>{let{children:t}=e,{planId:r,planPeriod:n,for:i}=u();return(0,o.FD)(l.Rx,{for:i,planId:r,planPeriod:n,children:[(0,o.Y)(q,{}),t]})},ee=e=>{let{children:t,name:r}=e,{checkout:o}=(0,l.v$)();return o.status!==r?null:t},et=e=>{let{children:t,status:r}=e,{errors:o,fetchStatus:n}=(0,l.v$)();return(0,c.useMemo)(()=>{if(o.global){let e=o.global.flatMap(e=>{if(e.isClerkAPIResponseError())return e.errors.map(e=>e.code)});return e.includes("missing_payer_email")?"missing_payer_email":e.includes("invalid_plan_change")?"invalid_plan_change":"generic_error"}return n},[n])!==r?null:t};r(95055);var er=r(78036),eo=r(10078),en=r(32336);let ei=()=>{let{errors:e}=(0,l.v$)(),{translateError:t}=(0,eo._)(),{t:r}=(0,eo._)();return(0,o.Y)(n.Drawer.Body,{children:(0,o.Y)(m.so,{align:"center",justify:"center",sx:e=>({height:"100%",padding:e.space.$4,fontSize:e.fontSizes.$md}),children:(0,o.Y)(er.F,{variant:"danger",colorScheme:"danger",children:e.global?t(e.global[0]):r((0,h.G)("unstable__errors.form_param_value_invalid"))})})})},ea=()=>{var e;let{planPeriod:t}=u(),{errors:r}=(0,l.v$)(),i=null==r||null==(e=r.global)?void 0:e.filter(e=>e.isClerkAPIResponseError()).flatMap(e=>e.errors).find(e=>"invalid_plan_change"===e.code);if(!i)return null;let{plan:a,isPlanUpgradePossible:c}=(null==i?void 0:i.meta)||{};return(0,o.Y)(n.Drawer.Body,{children:(0,o.FD)(m.so,{gap:4,direction:"col",children:[(0,o.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,o.Y)(g.p.Root,{children:(0,o.FD)(g.p.Group,{children:[(0,o.Y)(g.p.Title,{title:a.name,description:"annual"===t?(0,h.G)("billing.billedAnnually"):void 0}),(0,o.Y)(g.p.Description,{prefix:"annual"===t?"x12":void 0,text:"".concat(a.currency_symbol).concat("month"===t?a.amount_formatted:a.annual_monthly_amount_formatted),suffix:(0,h.G)("billing.checkout.perMonth")})]})})}),(0,o.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,o.Y)(er.F,{variant:"info",colorScheme:"info",title:c?(0,h.G)("billing.cannotSubscribeMonthly"):(0,h.G)("billing.cannotSubscribeUnrecoverable")})})]})})},el=()=>{let{checkout:e}=(0,l.v$)(),{setIsOpen:t}=(0,n.g)();return(0,o.Y)(n.Drawer.Body,{children:(0,o.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,o.Y)(en.v,{title:(0,h.G)("billing.checkout.emailForm.title"),subtitle:(0,h.G)("billing.checkout.emailForm.subtitle"),onSuccess:()=>void e.start(),onReset:()=>t(!1),disableAutoFocus:!0})})})},ec=e=>(0,o.Y)(p.n.Root,{flow:"checkout",children:(0,o.Y)(p.n.Part,{children:(0,o.Y)(i.m$.Provider,{value:e.for||"user",children:(0,o.Y)(d.Provider,{value:{componentName:"Checkout",...e},children:(0,o.FD)(n.Drawer.Content,{children:[(0,o.Y)(n.Drawer.Header,{title:(0,h.G)("billing.checkout.title")}),(0,o.FD)(Q,{children:[(0,o.FD)(ee,{name:"needs_initialization",children:[(0,o.Y)(et,{status:"fetching",children:(0,o.Y)(m.y$,{sx:{margin:"auto"}})}),(0,o.Y)(et,{status:"invalid_plan_change",children:(0,o.Y)(ea,{})}),(0,o.Y)(et,{status:"missing_payer_email",children:(0,o.Y)(el,{})}),(0,o.Y)(et,{status:"generic_error",children:(0,o.Y)(ei,{})})]}),(0,o.Y)(ee,{name:"completed",children:(0,o.Y)(k,{})}),(0,o.Y)(ee,{name:"needs_confirmation",children:(0,o.Y)(L,{})})]})]})})})})})},13450:function(e,t,r){r.d(t,{pr:()=>M,L6:()=>T,Mo:()=>G,bL:()=>S}),r(88711);var o=r(14518),n=r(21210),i=r(35074),a=r(23707),l=r(63269),c=r(52454),s=r(11475),d=r(23549),u=r(38930),p=r(4468),h=r(46256),m=r(16580),g=r(10078),y=r(22861),f=r(18272),b=r(58920);let Y=e=>(0,o.Y)(f.az,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),D=()=>(0,o.Y)(Y,{sx:e=>({height:e.space.$10,width:"100%"})}),$=e=>(0,o.Y)(f.so,{direction:"col",gap:2,children:e.children}),v=()=>(0,o.Y)(f.az,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,o.FD)(f.so,{direction:"col",gap:5,children:[(0,o.FD)($,{children:[(0,o.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,o.Y)(D,{})]}),(0,o.FD)(f.xA,{columns:2,gap:4,children:[(0,o.FD)($,{children:[(0,o.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,o.Y)(D,{})]}),(0,o.FD)($,{children:[(0,o.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,o.Y)(D,{})]})]}),(0,o.FD)($,{children:[(0,o.Y)(Y,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,o.Y)(D,{})]}),(0,o.FD)($,{children:[(0,o.Y)(Y,{}),(0,o.Y)(Y,{}),(0,o.Y)(Y,{sx:{width:"66.666667%"}})]})]})}),[x,w]=(0,n.e3)("AddPaymentMethodRoot"),k=e=>{var t;let r,{children:a,checkout:l,...c}=e,s=(0,h.XX)(),d=(0,i.useRef)(null),{t:p}=(0,g._)(),[f,b]=(0,i.useState)(void 0),[Y,D]=(0,i.useState)(void 0),[$,v]=(0,i.useState)(void 0),w=(t=d.current,r=(0,m.K)().parsedInternalTheme,(0,i.useMemo)(()=>{if(!t)return;let{colors:e,fontWeights:o,fontSizes:n,radii:i,space:a}=r;return{colorPrimary:(0,u.G3)(t,e.$primary500,e.$colorBackground),colorBackground:(0,u.G3)(t,e.$colorInput,e.$colorBackground),colorText:(0,u.G3)(t,e.$colorForeground,e.$colorBackground),colorTextSecondary:(0,u.G3)(t,e.$colorMutedForeground,e.$colorBackground),colorSuccess:(0,u.G3)(t,e.$success500,e.$colorBackground),colorDanger:(0,u.G3)(t,e.$danger500,e.$colorBackground),colorWarning:(0,u.G3)(t,e.$warning500,e.$colorBackground),fontWeightNormal:(0,u.yJ)(t,"font-weight",o.$normal.toString()),fontWeightMedium:(0,u.yJ)(t,"font-weight",o.$medium.toString()),fontWeightBold:(0,u.yJ)(t,"font-weight",o.$bold.toString()),fontSizeXl:(0,u.yJ)(t,"font-size",n.$xl),fontSizeLg:(0,u.yJ)(t,"font-size",n.$lg),fontSizeSm:(0,u.yJ)(t,"font-size",n.$md),fontSizeXs:(0,u.yJ)(t,"font-size",n.$sm),borderRadius:(0,u.yJ)(t,"border-radius",i.$lg),spacingUnit:(0,u.yJ)(t,"padding",a.$1)}},[r,t]));return(0,o.FD)(x.Provider,{value:{value:{headerTitle:f,headerSubtitle:Y,submitLabel:$,setHeaderTitle:b,setHeaderSubtitle:D,setSubmitLabel:v,checkout:l,...c}},children:[(0,o.Y)("div",{ref:d,style:{display:"none"}}),(0,o.Y)(n.Tn,{checkout:l,for:s,stripeAppearance:w,paymentDescription:p((0,y.G)((null==l?void 0:l.planPeriod)==="month"?"billing.paymentMethod.applePayDescription.monthly":"billing.paymentMethod.applePayDescription.annual")),children:a})]})},F=e=>{let{isProviderReady:t}=(0,n.Jl)();return t?null:e.children},_=e=>{let{isProviderReady:t}=(0,n.Jl)();return t?(0,o.Y)(o.FK,{children:e.children}):null},S=e=>{let{children:t,...r}=e;return(0,o.FD)(k,{...r,children:[(0,o.Y)(F,{children:(0,o.Y)(f.so,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,o.Y)(f.y$,{size:"lg",colorScheme:"primary",elementDescriptor:b.$z.spinner})})}),(0,o.Y)(_,{children:(0,o.Y)(R,{children:t})})]})},z=(e,t)=>{(0,i.useRef)(()=>{t(e)}),(0,i.useEffect)(()=>{t(e)},[e,t])},G=e=>{let{text:t}=e,{setHeaderTitle:r}=w();return z(t,r),null},T=e=>{let{text:t}=e,{setHeaderSubtitle:r}=w();return z(t,r),null},M=e=>{let{text:t}=e,{setSubmitLabel:r}=w();return z(t,r),null},R=e=>{let{children:t}=e,{headerTitle:r,headerSubtitle:i,submitLabel:u,checkout:m,onSuccess:g,cancelAction:f}=w(),b=(0,l.f0)(),Y=(0,h.N7)(),{isFormReady:D,submit:$,reset:x}=(0,n.Jl)(),k=async e=>{e.preventDefault(),b.setLoading(),b.setError(void 0);let{data:t,error:r}=await $();if(!r)try{await g(t)}catch(e){(0,p.H4)(e,[],b.setError)}finally{b.setIdle(),x()}};return(0,o.Y)(d.M,{headerTitle:r,headerSubtitle:i,children:(0,o.FD)(c.l.Root,{onSubmit:k,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[t,(0,o.Y)(n.cl,{fallback:(0,o.Y)(v,{})}),(0,o.Y)(a.Z.Alert,{children:b.error}),(0,o.Y)(s.G,{isDisabled:!D,submitLabel:null!=u?u:(0,y.G)("".concat(Y,".billingPage.paymentMethodsSection.formButtonPrimary__add")),onReset:f,hideReset:!f,sx:{flex:m?1:void 0}})]})})}},53369:function(e,t,r){r.d(t,{O:()=>s});var o=r(14518),n=r(18272),i=r(58920),a=r(22861),l=r(14967),c=r(65203);let s=e=>{let{paymentMethod:t}=e;return(0,o.FD)(n.so,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:i.$z.paymentMethodRow,children:[(0,o.Y)(n.In,{icon:"card"===t.paymentType?l.A:c.A,sx:e=>({alignSelf:"center",color:e.colors.$colorMutedForeground}),elementDescriptor:i.$z.paymentMethodRowIcon}),(0,o.Y)(n.EY,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:i.$z.paymentMethodRowType,children:"card"===t.paymentType?t.cardType:t.paymentType}),(0,o.Y)(n.EY,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:i.$z.paymentMethodRowValue,children:"card"===t.paymentType?"⋯ ".concat(t.last4):null}),t.isDefault&&(0,o.Y)(n.Ex,{elementDescriptor:i.$z.paymentMethodRowBadge,elementId:i.$z.paymentMethodRowBadge.setId("default"),localizationKey:(0,a.G)("badge__default")}),"expired"===t.status&&(0,o.Y)(n.Ex,{elementDescriptor:i.$z.paymentMethodRowBadge,elementId:i.$z.paymentMethodRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,a.G)("badge__expired")})]})}},13679:function(e,t,r){r.d(t,{V:()=>c});var o=r(14518),n=r(18272),i=r(22861);let a={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan",free_trial:"badge__freeTrial"},l={active:"secondary",upcoming:"primary",past_due:"warning",free_trial:"secondary"},c=e=>{let{subscription:t,elementDescriptor:r}=e;return(0,o.Y)(n.Ex,{elementDescriptor:r,colorScheme:l[t.status],localizationKey:(0,i.G)(a[t.status])})}}}]);

package/dist/{checkout_ui_ae56aa_1.0.0-canary.v20251219163248.js → checkout_ui_e3da0c_1.0.0-canary.v20251219180306.js}

@@ -6,4 +6,4 @@
                 100% {
                   stroke-dashoffset: 0;
                 }
-            `})]}),(0,i.FD)(m.L9,{sx:e=>({margin:"auto",gridArea:"1/1",position:"relative",textAlign:"center",transform:`translateY(${e.space.$20})`}),children:[(0,i.Y)(m.DZ,{elementDescriptor:f.$z.checkoutSuccessTitle,as:"h2",textVariant:"h2",localizationKey:p?(0,h.G)("billing.checkout.title__trialSuccess"):a.totalDueNow.amount>0?(0,h.G)("billing.checkout.title__paymentSuccessful"):(0,h.G)("billing.checkout.title__subscriptionSuccessful"),sx:e=>({opacity:0,animationName:"slideUp",animationDuration:`${b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards",color:e.colors.$colorForeground,"@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}})}),(0,i.Y)(m.EY,{elementDescriptor:f.$z.checkoutSuccessDescription,colorScheme:"secondary",sx:e=>({textAlign:"center",paddingInline:e.space.$8,marginBlockStart:e.space.$2,opacity:0,animationName:"slideUp",animationDuration:`${1.5*b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards","@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}}),localizationKey:a.totalDueNow.amount>0?(0,h.G)("billing.checkout.description__paymentSuccessful"):(0,h.G)("billing.checkout.description__subscriptionSuccessful")})]})]})}),(0,i.FD)(o.Drawer.Footer,{sx:e=>({rowGap:e.space.$4,animationName:"footerSlideInUp",animationDuration:`${b.wz.drawer}ms`,animationTimingFunction:b._8.bezier,"@keyframes footerSlideInUp":{"0%":{transform:"translateY(100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{animation:"none"}}),children:[(0,i.FD)(g.p.Root,{children:[(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__totalPaid")}),(0,i.Y)(g.p.Description,{text:`${a.totalDueNow.currencySymbol}${a.totalDueNow.amountFormatted}`})]}),p?(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__freeTrialEndsAt")}),(0,i.Y)(g.p.Description,{text:(0,y.Y)(p)})]}):null,(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:a.totalDueNow.amount>0||null!==p?(0,h.G)("billing.checkout.lineItems.title__paymentMethod"):(0,h.G)("billing.checkout.lineItems.title__subscriptionBegins")}),(0,i.Y)(g.p.Description,{text:a.totalDueNow.amount>0||null!==p?s?"card"!==s.paymentType?s.paymentType?`${x(s.paymentType)}`:"–":s.cardType?`${x(s.cardType)} ⋯ ${s.last4}`:"–":"–":d?(0,y.Y)(new Date(d)):"–"})]})]}),(0,i.Y)(m.$n,{onClick:()=>{r&&e.navigate(r),t&&t(!1)},localizationKey:(0,h.G)("formButtonPrimary")})]})]}):null};var F=r(6088),_=r(3269),S=r(6839),z=r(1586),G=r(6455),T=r(4468),M=r(625),R=r(7288),C=r(9068),B=r(8023),A=r(3450),I=r(3369),E=r(3679);let P=e=>e[0].toUpperCase()+e.slice(1),N="payment_method_id",L=(0,_.dm)(()=>{let{checkout:e}=(0,l.v$)(),{plan:t,totals:r,isImmediatePlanChange:n,planPeriod:a,freeTrialEndsAt:c}=e;if(!t)return null;let s=!!r.credit?.amount&&r.credit.amount>0,d=!!r.pastDue?.amount&&r.pastDue.amount>0,u="month"===a?t.fee:t.annualMonthlyFee;return(0,i.FD)(o.Drawer.Body,{children:[(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,i.FD)(g.p.Root,{children:[(0,i.FD)(g.p.Group,{children:[(0,i.Y)(g.p.Title,{title:t.name,description:"annual"===a?(0,h.G)("billing.billedAnnually"):void 0,badge:t.freeTrialEnabled&&c?(0,i.Y)(E.V,{subscription:{status:"free_trial"}}):null}),(0,i.Y)(g.p.Description,{prefix:"annual"===a?"x12":void 0,text:`${u.currencySymbol}${u.amountFormatted}`,suffix:(0,h.G)("billing.checkout.perMonth")})]}),(0,i.FD)(g.p.Group,{borderTop:!0,variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.subtotal")}),(0,i.Y)(g.p.Description,{text:`${r.subtotal.currencySymbol}${r.subtotal.amountFormatted}`})]}),s&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.creditRemainder")}),(0,i.Y)(g.p.Description,{text:`- ${r.credit?.currencySymbol}${r.credit?.amountFormatted}`})]}),d&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.FD)(G.m_.Root,{children:[(0,i.Y)(G.m_.Trigger,{children:(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.pastDue"),icon:C.A})}),(0,i.Y)(G.m_.Content,{text:(0,h.G)("billing.checkout.pastDueNotice")})]}),(0,i.Y)(g.p.Description,{text:`${r.pastDue?.currencySymbol}${r.pastDue?.amountFormatted}`})]}),!!c&&!!t.freeTrialDays&&r.totalDueAfterFreeTrial&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.totalDueAfterTrial",{days:t.freeTrialDays})}),(0,i.Y)(g.p.Description,{text:`${r.totalDueAfterFreeTrial.currencySymbol}${r.totalDueAfterFreeTrial.amountFormatted}`})]}),(0,i.FD)(g.p.Group,{borderTop:!0,children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.totalDueToday")}),(0,i.Y)(g.p.Description,{text:`${r.totalDueNow.currencySymbol}${r.totalDueNow.amountFormatted}`})]})]})}),!n&&(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({paddingBlockStart:e.space.$4,paddingInline:e.space.$4}),children:(0,i.Y)(m.EY,{localizationKey:(0,h.G)("billing.checkout.downgradeNotice"),variant:"caption",colorScheme:"secondary"})}),(0,i.Y)(K,{})]})}),W=()=>{let{onSubscriptionComplete:e}=u(),{checkout:t}=(0,l.v$)(),r=(0,_.f0)();if("needs_confirmation"!==t.status)throw Error("Checkout not found");let i=async i=>{r.setLoading(),r.setError(void 0);let{error:o}=await t.confirm(i);o?(0,T.H4)(o,[],r.setError):e?.(),r.setIdle()};return{payWithExistingPaymentMethod:e=>(e.preventDefault(),i({paymentMethodId:new FormData(e.currentTarget).get(N)})),addPaymentMethodAndPay:e=>i(e),payWithTestCard:()=>i({gateway:"stripe",useTestCard:!0}),payWithoutPaymentMethod:e=>(e.preventDefault(),i({}))}},K=()=>{let{checkout:e}=(0,l.v$)(),{plan:t}=e,{isLoading:r}=(0,R.mu)();return t?r?(0,i.Y)(m.y$,{sx:{margin:"auto"}}):(0,i.Y)(U,{}):null},U=()=>{let{checkout:e}=(0,l.v$)(),{plan:t,isImmediatePlanChange:r,needsPaymentMethod:o}=e,{data:n}=(0,R.mu)(),[a,s]=(0,c.useState)(()=>n.length>0?"existing":"new");return t?(0,i.FD)(m.fv,{elementDescriptor:f.$z.checkoutFormElementsRoot,gap:4,sx:e=>({padding:e.space.$4}),children:[(0,i.Y)(i.FK,{children:n.length>0&&r&&o&&(0,i.FD)(S.I.Root,{"aria-label":"Payment method source",value:a,onChange:e=>s(e),size:"lg",fullWidth:!0,children:[(0,i.Y)(S.I.Button,{value:"existing",text:(0,h.G)("billing.paymentMethods__label")}),(0,i.Y)(S.I.Button,{value:"new",text:(0,h.G)("billing.addPaymentMethod__label")})]})}),o?"existing"===a?(0,i.Y)(Z,{paymentMethods:n}):"new"===a&&(0,i.Y)(j,{}):(0,i.Y)(V,{})]}):null},J=()=>{let{isLoading:e}=(0,_.f0)(),{payWithTestCard:t}=W();return(0,i.FD)(m.az,{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,i.Y)(m.az,{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,i.FD)(m.so,{sx:e=>({alignItems:"center",justifyContent:"center",flexDirection:"column",rowGap:e.space.$2}),children:[(0,i.Y)(m.EY,{sx:e=>({color:e.colors.$warning500,fontWeight:e.fontWeights.$semibold}),localizationKey:(0,h.G)("billing.paymentMethod.dev.developmentMode")}),(0,i.Y)(m.$n,{type:"button",block:!0,variant:"bordered",localizationKey:(0,h.G)("userProfile.billingPage.paymentMethodsSection.payWithTestCardButton"),colorScheme:"secondary",isLoading:e,onClick:t})]})]})},O=()=>{let{checkout:e}=(0,l.v$)(),{status:t,freeTrialEndsAt:r,totals:i}=e;if("needs_initialization"===t)throw Error("Clerk: Invalid state");return r?(0,h.G)("billing.startFreeTrial"):i.totalDueNow.amount>0?(0,h.G)("billing.pay",{amount:`${i.totalDueNow.currencySymbol}${i.totalDueNow.amountFormatted}`}):(0,h.G)("billing.subscribe")},V=(0,_.dm)(()=>{let{for:e}=u(),{payWithoutPaymentMethod:t}=W(),r=(0,_.f0)();return(0,i.FD)(m.lV,{onSubmit:t,sx:X,children:[(0,i.Y)(F.Z.Alert,{children:r.error}),(0,i.Y)(H,{})]})}),j=(0,_.dm)(()=>{let{addPaymentMethodAndPay:e}=W(),t=O(),{checkout:r}=(0,l.v$)();return(0,i.FD)(A.bL,{onSuccess:e,checkout:r,children:[(0,i.Y)(M.W,{children:(0,i.Y)(J,{})}),(0,i.Y)(A.pr,{text:t})]})}),H=e=>{let t=(0,_.f0)(),r=O();return(0,i.Y)(m.$n,{type:"submit",colorScheme:"primary",size:"sm",textVariant:"buttonLarge",sx:{width:"100%"},isLoading:t.isLoading,localizationKey:r,...e})},X=e=>({display:"flex",flexDirection:"column",rowGap:e.space.$4}),Z=(0,_.dm)(({paymentMethods:e})=>{let{checkout:t}=(0,l.v$)(),{paymentMethod:r,isImmediatePlanChange:o,needsPaymentMethod:n}=t,{payWithExistingPaymentMethod:a}=W(),s=(0,_.f0)(),[d,u]=(0,c.useState)(r||e.find(e=>e.isDefault)),p=(0,c.useMemo)(()=>e.map(e=>{let t="card"!==e.paymentType?e.paymentType?`${P(e.paymentType)}`:"–":e.cardType?`${P(e.cardType)} ⋯ ${e.last4}`:"–";return{value:e.id,label:t}}),[e]);return(0,i.FD)(m.lV,{onSubmit:a,sx:X,children:[o&&n?(0,i.FD)(z.l6,{elementId:"paymentMethod",options:p,value:d?.id||null,onChange:t=>{u(e.find(e=>e.id===t.value))},portal:!0,children:[(0,i.Y)("input",{name:N,type:"hidden",value:d?.id}),(0,i.Y)(z.JC,{icon:B.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),children:d&&(0,i.Y)(I.O,{paymentMethod:d})}),(0,i.Y)(z.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]}):(0,i.Y)("input",{name:N,type:"hidden",value:d?.id}),(0,i.Y)(F.Z.Alert,{children:s.error}),(0,i.Y)(H,{})]})}),q=()=>{let{checkout:e}=(0,l.v$)();return(0,c.useEffect)(()=>{e.start()},[]),null},Q=({children:e})=>{let{planId:t,planPeriod:r,for:o}=u();return(0,i.FD)(l.Rx,{for:o,planId:t,planPeriod:r,children:[(0,i.Y)(q,{}),e]})},ee=({children:e,name:t})=>{let{checkout:r}=(0,l.v$)();return r.status!==t?null:e},et=({children:e,status:t})=>{let{errors:r,fetchStatus:i}=(0,l.v$)();return(0,c.useMemo)(()=>{if(r.global){let e=r.global.flatMap(e=>{if(e.isClerkApiResponseError())return e.errors.map(e=>e.code)});return e.includes("missing_payer_email")?"missing_payer_email":e.includes("invalid_plan_change")?"invalid_plan_change":"generic_error"}return i},[i])!==t?null:e};var er=r(8036),ei=r(78),eo=r(2336);let en=()=>{let{errors:e}=(0,l.v$)(),{translateError:t}=(0,ei._)(),{t:r}=(0,ei._)();return(0,i.Y)(o.Drawer.Body,{children:(0,i.Y)(m.so,{align:"center",justify:"center",sx:e=>({height:"100%",padding:e.space.$4,fontSize:e.fontSizes.$md}),children:(0,i.Y)(er.F,{variant:"danger",colorScheme:"danger",children:e.global?t(e.global[0]):r((0,h.G)("unstable__errors.form_param_value_invalid"))})})})},ea=()=>{let{planPeriod:e}=u(),{errors:t}=(0,l.v$)(),r=t?.global?.filter(e=>e.isClerkApiResponseError()).flatMap(e=>e.errors).find(e=>"invalid_plan_change"===e.code);if(!r)return null;let{plan:n,isPlanUpgradePossible:a}=r?.meta||{};return(0,i.Y)(o.Drawer.Body,{children:(0,i.FD)(m.so,{gap:4,direction:"col",children:[(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,i.Y)(g.p.Root,{children:(0,i.FD)(g.p.Group,{children:[(0,i.Y)(g.p.Title,{title:n.name,description:"annual"===e?(0,h.G)("billing.billedAnnually"):void 0}),(0,i.Y)(g.p.Description,{prefix:"annual"===e?"x12":void 0,text:`${n.currency_symbol}${"month"===e?n.amount_formatted:n.annual_monthly_amount_formatted}`,suffix:(0,h.G)("billing.checkout.perMonth")})]})})}),(0,i.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,i.Y)(er.F,{variant:"info",colorScheme:"info",title:a?(0,h.G)("billing.cannotSubscribeMonthly"):(0,h.G)("billing.cannotSubscribeUnrecoverable")})})]})})},el=()=>{let{checkout:e}=(0,l.v$)(),{setIsOpen:t}=(0,o.g)();return(0,i.Y)(o.Drawer.Body,{children:(0,i.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,i.Y)(eo.v,{title:(0,h.G)("billing.checkout.emailForm.title"),subtitle:(0,h.G)("billing.checkout.emailForm.subtitle"),onSuccess:()=>void e.start(),onReset:()=>t(!1),disableAutoFocus:!0})})})},ec=e=>(0,i.Y)(p.n.Root,{flow:"checkout",children:(0,i.Y)(p.n.Part,{children:(0,i.Y)(n.m$.Provider,{value:e.for||"user",children:(0,i.Y)(d.Provider,{value:{componentName:"Checkout",...e},children:(0,i.FD)(o.Drawer.Content,{children:[(0,i.Y)(o.Drawer.Header,{title:(0,h.G)("billing.checkout.title")}),(0,i.FD)(Q,{children:[(0,i.FD)(ee,{name:"needs_initialization",children:[(0,i.Y)(et,{status:"fetching",children:(0,i.Y)(m.y$,{sx:{margin:"auto"}})}),(0,i.Y)(et,{status:"invalid_plan_change",children:(0,i.Y)(ea,{})}),(0,i.Y)(et,{status:"missing_payer_email",children:(0,i.Y)(el,{})}),(0,i.Y)(et,{status:"generic_error",children:(0,i.Y)(en,{})})]}),(0,i.Y)(ee,{name:"completed",children:(0,i.Y)(v,{})}),(0,i.Y)(ee,{name:"needs_confirmation",children:(0,i.Y)(L,{})})]})]})})})})})},3450:function(e,t,r){r.d(t,{pr:()=>M,L6:()=>T,Mo:()=>G,bL:()=>S});var i=r(4518),o=r(1210),n=r(5074),a=r(6088),l=r(3269),c=r(2454),s=r(1475),d=r(3549),u=r(8930),p=r(4468),h=r(6256),m=r(6580),g=r(78),y=r(2861),f=r(8272),$=r(8920);let b=e=>(0,i.Y)(f.az,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),Y=()=>(0,i.Y)(b,{sx:e=>({height:e.space.$10,width:"100%"})}),D=e=>(0,i.Y)(f.so,{direction:"col",gap:2,children:e.children}),x=()=>(0,i.Y)(f.az,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,i.FD)(f.so,{direction:"col",gap:5,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]}),(0,i.FD)(f.xA,{columns:2,gap:4,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{}),(0,i.Y)(b,{}),(0,i.Y)(b,{sx:{width:"66.666667%"}})]})]})}),[w,k]=(0,o.e3)("AddPaymentMethodRoot"),v=({children:e,checkout:t,...r})=>{var a;let l,c=(0,h.XX)(),s=(0,n.useRef)(null),{t:d}=(0,g._)(),[p,f]=(0,n.useState)(void 0),[$,b]=(0,n.useState)(void 0),[Y,D]=(0,n.useState)(void 0),x=(a=s.current,l=(0,m.K)().parsedInternalTheme,(0,n.useMemo)(()=>{if(!a)return;let{colors:e,fontWeights:t,fontSizes:r,radii:i,space:o}=l;return{colorPrimary:(0,u.G3)(a,e.$primary500,e.$colorBackground),colorBackground:(0,u.G3)(a,e.$colorInput,e.$colorBackground),colorText:(0,u.G3)(a,e.$colorForeground,e.$colorBackground),colorTextSecondary:(0,u.G3)(a,e.$colorMutedForeground,e.$colorBackground),colorSuccess:(0,u.G3)(a,e.$success500,e.$colorBackground),colorDanger:(0,u.G3)(a,e.$danger500,e.$colorBackground),colorWarning:(0,u.G3)(a,e.$warning500,e.$colorBackground),fontWeightNormal:(0,u.yJ)(a,"font-weight",t.$normal.toString()),fontWeightMedium:(0,u.yJ)(a,"font-weight",t.$medium.toString()),fontWeightBold:(0,u.yJ)(a,"font-weight",t.$bold.toString()),fontSizeXl:(0,u.yJ)(a,"font-size",r.$xl),fontSizeLg:(0,u.yJ)(a,"font-size",r.$lg),fontSizeSm:(0,u.yJ)(a,"font-size",r.$md),fontSizeXs:(0,u.yJ)(a,"font-size",r.$sm),borderRadius:(0,u.yJ)(a,"border-radius",i.$lg),spacingUnit:(0,u.yJ)(a,"padding",o.$1)}},[l,a]));return(0,i.FD)(w.Provider,{value:{value:{headerTitle:p,headerSubtitle:$,submitLabel:Y,setHeaderTitle:f,setHeaderSubtitle:b,setSubmitLabel:D,checkout:t,...r}},children:[(0,i.Y)("div",{ref:s,style:{display:"none"}}),(0,i.Y)(o.Tn,{checkout:t,for:c,stripeAppearance:x,paymentDescription:d((0,y.G)(t?.planPeriod==="month"?"billing.paymentMethod.applePayDescription.monthly":"billing.paymentMethod.applePayDescription.annual")),children:e})]})},F=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?null:e.children},_=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?(0,i.Y)(i.FK,{children:e.children}):null},S=e=>{let{children:t,...r}=e;return(0,i.FD)(v,{...r,children:[(0,i.Y)(F,{children:(0,i.Y)(f.so,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,i.Y)(f.y$,{size:"lg",colorScheme:"primary",elementDescriptor:$.$z.spinner})})}),(0,i.Y)(_,{children:(0,i.Y)(R,{children:t})})]})},z=(e,t)=>{(0,n.useRef)(()=>{t(e)}),(0,n.useEffect)(()=>{t(e)},[e,t])},G=({text:e})=>{let{setHeaderTitle:t}=k();return z(e,t),null},T=({text:e})=>{let{setHeaderSubtitle:t}=k();return z(e,t),null},M=({text:e})=>{let{setSubmitLabel:t}=k();return z(e,t),null},R=({children:e})=>{let{headerTitle:t,headerSubtitle:r,submitLabel:n,checkout:u,onSuccess:m,cancelAction:g}=k(),f=(0,l.f0)(),$=(0,h.N7)(),{isFormReady:b,submit:Y,reset:D}=(0,o.Jl)(),w=async e=>{e.preventDefault(),f.setLoading(),f.setError(void 0);let{data:t,error:r}=await Y();if(!r)try{await m(t)}catch(e){(0,p.H4)(e,[],f.setError)}finally{f.setIdle(),D()}};return(0,i.Y)(d.M,{headerTitle:t,headerSubtitle:r,children:(0,i.FD)(c.l.Root,{onSubmit:w,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[e,(0,i.Y)(o.cl,{fallback:(0,i.Y)(x,{})}),(0,i.Y)(a.Z.Alert,{children:f.error}),(0,i.Y)(s.G,{isDisabled:!b,submitLabel:n??(0,y.G)(`${$}.billingPage.paymentMethodsSection.formButtonPrimary__add`),onReset:g,hideReset:!g,sx:{flex:u?1:void 0}})]})})}},3369:function(e,t,r){r.d(t,{O:()=>s});var i=r(4518),o=r(8272),n=r(8920),a=r(2861),l=r(4967),c=r(5203);let s=({paymentMethod:e})=>(0,i.FD)(o.so,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:n.$z.paymentMethodRow,children:[(0,i.Y)(o.In,{icon:"card"===e.paymentType?l.A:c.A,sx:e=>({alignSelf:"center",color:e.colors.$colorMutedForeground}),elementDescriptor:n.$z.paymentMethodRowIcon}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:n.$z.paymentMethodRowType,children:"card"===e.paymentType?e.cardType:e.paymentType}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:n.$z.paymentMethodRowValue,children:"card"===e.paymentType?`⋯ ${e.last4}`:null}),e.isDefault&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("default"),localizationKey:(0,a.G)("badge__default")}),"expired"===e.status&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,a.G)("badge__expired")})]})},3679:function(e,t,r){r.d(t,{V:()=>c});var i=r(4518),o=r(8272),n=r(2861);let a={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan",free_trial:"badge__freeTrial"},l={active:"secondary",upcoming:"primary",past_due:"warning",free_trial:"secondary"},c=({subscription:e,elementDescriptor:t})=>(0,i.Y)(o.Ex,{elementDescriptor:t,colorScheme:l[e.status],localizationKey:(0,n.G)(a[e.status])})}}]);
+            `})]}),(0,i.FD)(m.L9,{sx:e=>({margin:"auto",gridArea:"1/1",position:"relative",textAlign:"center",transform:`translateY(${e.space.$20})`}),children:[(0,i.Y)(m.DZ,{elementDescriptor:f.$z.checkoutSuccessTitle,as:"h2",textVariant:"h2",localizationKey:p?(0,h.G)("billing.checkout.title__trialSuccess"):a.totalDueNow.amount>0?(0,h.G)("billing.checkout.title__paymentSuccessful"):(0,h.G)("billing.checkout.title__subscriptionSuccessful"),sx:e=>({opacity:0,animationName:"slideUp",animationDuration:`${b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards",color:e.colors.$colorForeground,"@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}})}),(0,i.Y)(m.EY,{elementDescriptor:f.$z.checkoutSuccessDescription,colorScheme:"secondary",sx:e=>({textAlign:"center",paddingInline:e.space.$8,marginBlockStart:e.space.$2,opacity:0,animationName:"slideUp",animationDuration:`${1.5*b.wz.slowest}ms`,animationTimingFunction:b._8.bezier,animationFillMode:"forwards","@keyframes slideUp":{"0%":{transform:"translateY(30px)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{opacity:1,animation:"none"}}),localizationKey:a.totalDueNow.amount>0?(0,h.G)("billing.checkout.description__paymentSuccessful"):(0,h.G)("billing.checkout.description__subscriptionSuccessful")})]})]})}),(0,i.FD)(o.Drawer.Footer,{sx:e=>({rowGap:e.space.$4,animationName:"footerSlideInUp",animationDuration:`${b.wz.drawer}ms`,animationTimingFunction:b._8.bezier,"@keyframes footerSlideInUp":{"0%":{transform:"translateY(100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}},...!S&&{animation:"none"}}),children:[(0,i.FD)(g.p.Root,{children:[(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__totalPaid")}),(0,i.Y)(g.p.Description,{text:`${a.totalDueNow.currencySymbol}${a.totalDueNow.amountFormatted}`})]}),p?(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.lineItems.title__freeTrialEndsAt")}),(0,i.Y)(g.p.Description,{text:(0,y.Y)(p)})]}):null,(0,i.FD)(g.p.Group,{variant:"secondary",children:[(0,i.Y)(g.p.Title,{title:a.totalDueNow.amount>0||null!==p?(0,h.G)("billing.checkout.lineItems.title__paymentMethod"):(0,h.G)("billing.checkout.lineItems.title__subscriptionBegins")}),(0,i.Y)(g.p.Description,{text:a.totalDueNow.amount>0||null!==p?s?"card"!==s.paymentType?s.paymentType?`${x(s.paymentType)}`:"–":s.cardType?`${x(s.cardType)} ⋯ ${s.last4}`:"–":"–":d?(0,y.Y)(new Date(d)):"–"})]})]}),(0,i.Y)(m.$n,{onClick:()=>{r&&e.navigate(r),t&&t(!1)},localizationKey:(0,h.G)("formButtonPrimary")})]})]}):null};var F=r(6088),_=r(3269),S=r(6839),z=r(1586),G=r(6455),T=r(4468),M=r(625),R=r(7288),C=r(9068),B=r(8023),I=r(3450),A=r(3369),E=r(3679);let P=e=>e[0].toUpperCase()+e.slice(1),N="payment_method_id",L=(0,_.dm)(()=>{let{checkout:e}=(0,l.v$)(),{plan:t,totals:r,isImmediatePlanChange:n,planPeriod:a,freeTrialEndsAt:c}=e;if(!t)return null;let s=!!r.credit?.amount&&r.credit.amount>0,d=!!r.pastDue?.amount&&r.pastDue.amount>0,u="month"===a?t.fee:t.annualMonthlyFee;return(0,i.FD)(o.Drawer.Body,{children:[(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,i.FD)(g.p.Root,{children:[(0,i.FD)(g.p.Group,{children:[(0,i.Y)(g.p.Title,{title:t.name,description:"annual"===a?(0,h.G)("billing.billedAnnually"):void 0,badge:t.freeTrialEnabled&&c?(0,i.Y)(E.V,{subscription:{status:"free_trial"}}):null}),(0,i.Y)(g.p.Description,{prefix:"annual"===a?"x12":void 0,text:`${u.currencySymbol}${u.amountFormatted}`,suffix:(0,h.G)("billing.checkout.perMonth")})]}),(0,i.FD)(g.p.Group,{borderTop:!0,variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.subtotal")}),(0,i.Y)(g.p.Description,{text:`${r.subtotal.currencySymbol}${r.subtotal.amountFormatted}`})]}),s&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.creditRemainder")}),(0,i.Y)(g.p.Description,{text:`- ${r.credit?.currencySymbol}${r.credit?.amountFormatted}`})]}),d&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.FD)(G.m_.Root,{children:[(0,i.Y)(G.m_.Trigger,{children:(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.pastDue"),icon:C.A})}),(0,i.Y)(G.m_.Content,{text:(0,h.G)("billing.checkout.pastDueNotice")})]}),(0,i.Y)(g.p.Description,{text:`${r.pastDue?.currencySymbol}${r.pastDue?.amountFormatted}`})]}),!!c&&!!t.freeTrialDays&&r.totalDueAfterFreeTrial&&(0,i.FD)(g.p.Group,{variant:"tertiary",children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.checkout.totalDueAfterTrial",{days:t.freeTrialDays})}),(0,i.Y)(g.p.Description,{text:`${r.totalDueAfterFreeTrial.currencySymbol}${r.totalDueAfterFreeTrial.amountFormatted}`})]}),(0,i.FD)(g.p.Group,{borderTop:!0,children:[(0,i.Y)(g.p.Title,{title:(0,h.G)("billing.totalDueToday")}),(0,i.Y)(g.p.Description,{text:`${r.totalDueNow.currencySymbol}${r.totalDueNow.amountFormatted}`})]})]})}),!n&&(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({paddingBlockStart:e.space.$4,paddingInline:e.space.$4}),children:(0,i.Y)(m.EY,{localizationKey:(0,h.G)("billing.checkout.downgradeNotice"),variant:"caption",colorScheme:"secondary"})}),(0,i.Y)(K,{})]})}),W=()=>{let{onSubscriptionComplete:e}=u(),{checkout:t}=(0,l.v$)(),r=(0,_.f0)();if("needs_confirmation"!==t.status)throw Error("Checkout not found");let i=async i=>{r.setLoading(),r.setError(void 0);let{error:o}=await t.confirm(i);o?(0,T.H4)(o,[],r.setError):e?.(),r.setIdle()};return{payWithExistingPaymentMethod:e=>(e.preventDefault(),i({paymentMethodId:new FormData(e.currentTarget).get(N)})),addPaymentMethodAndPay:e=>i(e),payWithTestCard:()=>i({gateway:"stripe",useTestCard:!0}),payWithoutPaymentMethod:e=>(e.preventDefault(),i({}))}},K=()=>{let{checkout:e}=(0,l.v$)(),{plan:t}=e,{isLoading:r}=(0,R.mu)();return t?r?(0,i.Y)(m.y$,{sx:{margin:"auto"}}):(0,i.Y)(U,{}):null},U=()=>{let{checkout:e}=(0,l.v$)(),{plan:t,isImmediatePlanChange:r,needsPaymentMethod:o}=e,{data:n}=(0,R.mu)(),[a,s]=(0,c.useState)(()=>n.length>0?"existing":"new");return t?(0,i.FD)(m.fv,{elementDescriptor:f.$z.checkoutFormElementsRoot,gap:4,sx:e=>({padding:e.space.$4}),children:[(0,i.Y)(i.FK,{children:n.length>0&&r&&o&&(0,i.FD)(S.I.Root,{"aria-label":"Payment method source",value:a,onChange:e=>s(e),size:"lg",fullWidth:!0,children:[(0,i.Y)(S.I.Button,{value:"existing",text:(0,h.G)("billing.paymentMethods__label")}),(0,i.Y)(S.I.Button,{value:"new",text:(0,h.G)("billing.addPaymentMethod__label")})]})}),o?"existing"===a?(0,i.Y)(Z,{paymentMethods:n}):"new"===a&&(0,i.Y)(j,{}):(0,i.Y)(V,{})]}):null},J=()=>{let{isLoading:e}=(0,_.f0)(),{payWithTestCard:t}=W();return(0,i.FD)(m.az,{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,i.Y)(m.az,{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,i.FD)(m.so,{sx:e=>({alignItems:"center",justifyContent:"center",flexDirection:"column",rowGap:e.space.$2}),children:[(0,i.Y)(m.EY,{sx:e=>({color:e.colors.$warning500,fontWeight:e.fontWeights.$semibold}),localizationKey:(0,h.G)("billing.paymentMethod.dev.developmentMode")}),(0,i.Y)(m.$n,{type:"button",block:!0,variant:"bordered",localizationKey:(0,h.G)("userProfile.billingPage.paymentMethodsSection.payWithTestCardButton"),colorScheme:"secondary",isLoading:e,onClick:t})]})]})},O=()=>{let{checkout:e}=(0,l.v$)(),{status:t,freeTrialEndsAt:r,totals:i}=e;if("needs_initialization"===t)throw Error("Clerk: Invalid state");return r?(0,h.G)("billing.startFreeTrial"):i.totalDueNow.amount>0?(0,h.G)("billing.pay",{amount:`${i.totalDueNow.currencySymbol}${i.totalDueNow.amountFormatted}`}):(0,h.G)("billing.subscribe")},V=(0,_.dm)(()=>{let{for:e}=u(),{payWithoutPaymentMethod:t}=W(),r=(0,_.f0)();return(0,i.FD)(m.lV,{onSubmit:t,sx:X,children:[(0,i.Y)(F.Z.Alert,{children:r.error}),(0,i.Y)(H,{})]})}),j=(0,_.dm)(()=>{let{addPaymentMethodAndPay:e}=W(),t=O(),{checkout:r}=(0,l.v$)();return(0,i.FD)(I.bL,{onSuccess:e,checkout:r,children:[(0,i.Y)(M.W,{children:(0,i.Y)(J,{})}),(0,i.Y)(I.pr,{text:t})]})}),H=e=>{let t=(0,_.f0)(),r=O();return(0,i.Y)(m.$n,{type:"submit",colorScheme:"primary",size:"sm",textVariant:"buttonLarge",sx:{width:"100%"},isLoading:t.isLoading,localizationKey:r,...e})},X=e=>({display:"flex",flexDirection:"column",rowGap:e.space.$4}),Z=(0,_.dm)(({paymentMethods:e})=>{let{checkout:t}=(0,l.v$)(),{paymentMethod:r,isImmediatePlanChange:o,needsPaymentMethod:n}=t,{payWithExistingPaymentMethod:a}=W(),s=(0,_.f0)(),[d,u]=(0,c.useState)(r||e.find(e=>e.isDefault)),p=(0,c.useMemo)(()=>e.map(e=>{let t="card"!==e.paymentType?e.paymentType?`${P(e.paymentType)}`:"–":e.cardType?`${P(e.cardType)} ⋯ ${e.last4}`:"–";return{value:e.id,label:t}}),[e]);return(0,i.FD)(m.lV,{onSubmit:a,sx:X,children:[o&&n?(0,i.FD)(z.l6,{elementId:"paymentMethod",options:p,value:d?.id||null,onChange:t=>{u(e.find(e=>e.id===t.value))},portal:!0,children:[(0,i.Y)("input",{name:N,type:"hidden",value:d?.id}),(0,i.Y)(z.JC,{icon:B.A,sx:e=>({justifyContent:"space-between",backgroundColor:e.colors.$colorBackground}),children:d&&(0,i.Y)(A.O,{paymentMethod:d})}),(0,i.Y)(z.UL,{sx:e=>({paddingBlock:e.space.$1,color:e.colors.$colorForeground})})]}):(0,i.Y)("input",{name:N,type:"hidden",value:d?.id}),(0,i.Y)(F.Z.Alert,{children:s.error}),(0,i.Y)(H,{})]})}),q=()=>{let{checkout:e}=(0,l.v$)();return(0,c.useEffect)(()=>{e.start()},[]),null},Q=({children:e})=>{let{planId:t,planPeriod:r,for:o}=u();return(0,i.FD)(l.Rx,{for:o,planId:t,planPeriod:r,children:[(0,i.Y)(q,{}),e]})},ee=({children:e,name:t})=>{let{checkout:r}=(0,l.v$)();return r.status!==t?null:e},et=({children:e,status:t})=>{let{errors:r,fetchStatus:i}=(0,l.v$)();return(0,c.useMemo)(()=>{if(r.global){let e=r.global.flatMap(e=>{if(e.isClerkAPIResponseError())return e.errors.map(e=>e.code)});return e.includes("missing_payer_email")?"missing_payer_email":e.includes("invalid_plan_change")?"invalid_plan_change":"generic_error"}return i},[i])!==t?null:e};var er=r(8036),ei=r(78),eo=r(2336);let en=()=>{let{errors:e}=(0,l.v$)(),{translateError:t}=(0,ei._)(),{t:r}=(0,ei._)();return(0,i.Y)(o.Drawer.Body,{children:(0,i.Y)(m.so,{align:"center",justify:"center",sx:e=>({height:"100%",padding:e.space.$4,fontSize:e.fontSizes.$md}),children:(0,i.Y)(er.F,{variant:"danger",colorScheme:"danger",children:e.global?t(e.global[0]):r((0,h.G)("unstable__errors.form_param_value_invalid"))})})})},ea=()=>{let{planPeriod:e}=u(),{errors:t}=(0,l.v$)(),r=t?.global?.filter(e=>e.isClerkAPIResponseError()).flatMap(e=>e.errors).find(e=>"invalid_plan_change"===e.code);if(!r)return null;let{plan:n,isPlanUpgradePossible:a}=r?.meta||{};return(0,i.Y)(o.Drawer.Body,{children:(0,i.FD)(m.so,{gap:4,direction:"col",children:[(0,i.Y)(m.az,{elementDescriptor:f.$z.checkoutFormLineItemsRoot,sx:e=>({padding:e.space.$4,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100}),children:(0,i.Y)(g.p.Root,{children:(0,i.FD)(g.p.Group,{children:[(0,i.Y)(g.p.Title,{title:n.name,description:"annual"===e?(0,h.G)("billing.billedAnnually"):void 0}),(0,i.Y)(g.p.Description,{prefix:"annual"===e?"x12":void 0,text:`${n.currency_symbol}${"month"===e?n.amount_formatted:n.annual_monthly_amount_formatted}`,suffix:(0,h.G)("billing.checkout.perMonth")})]})})}),(0,i.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,i.Y)(er.F,{variant:"info",colorScheme:"info",title:a?(0,h.G)("billing.cannotSubscribeMonthly"):(0,h.G)("billing.cannotSubscribeUnrecoverable")})})]})})},el=()=>{let{checkout:e}=(0,l.v$)(),{setIsOpen:t}=(0,o.g)();return(0,i.Y)(o.Drawer.Body,{children:(0,i.Y)(m.az,{sx:e=>({padding:e.space.$4}),children:(0,i.Y)(eo.v,{title:(0,h.G)("billing.checkout.emailForm.title"),subtitle:(0,h.G)("billing.checkout.emailForm.subtitle"),onSuccess:()=>void e.start(),onReset:()=>t(!1),disableAutoFocus:!0})})})},ec=e=>(0,i.Y)(p.n.Root,{flow:"checkout",children:(0,i.Y)(p.n.Part,{children:(0,i.Y)(n.m$.Provider,{value:e.for||"user",children:(0,i.Y)(d.Provider,{value:{componentName:"Checkout",...e},children:(0,i.FD)(o.Drawer.Content,{children:[(0,i.Y)(o.Drawer.Header,{title:(0,h.G)("billing.checkout.title")}),(0,i.FD)(Q,{children:[(0,i.FD)(ee,{name:"needs_initialization",children:[(0,i.Y)(et,{status:"fetching",children:(0,i.Y)(m.y$,{sx:{margin:"auto"}})}),(0,i.Y)(et,{status:"invalid_plan_change",children:(0,i.Y)(ea,{})}),(0,i.Y)(et,{status:"missing_payer_email",children:(0,i.Y)(el,{})}),(0,i.Y)(et,{status:"generic_error",children:(0,i.Y)(en,{})})]}),(0,i.Y)(ee,{name:"completed",children:(0,i.Y)(v,{})}),(0,i.Y)(ee,{name:"needs_confirmation",children:(0,i.Y)(L,{})})]})]})})})})})},3450:function(e,t,r){r.d(t,{pr:()=>M,L6:()=>T,Mo:()=>G,bL:()=>S});var i=r(4518),o=r(1210),n=r(5074),a=r(6088),l=r(3269),c=r(2454),s=r(1475),d=r(3549),u=r(8930),p=r(4468),h=r(6256),m=r(6580),g=r(78),y=r(2861),f=r(8272),$=r(8920);let b=e=>(0,i.Y)(f.az,{sx:[e=>({height:e.space.$2,width:"100%",borderRadius:e.radii.$md,background:e.colors.$neutralAlpha100}),e.sx]}),Y=()=>(0,i.Y)(b,{sx:e=>({height:e.space.$10,width:"100%"})}),D=e=>(0,i.Y)(f.so,{direction:"col",gap:2,children:e.children}),x=()=>(0,i.Y)(f.az,{"aria-label":"Loading...",sx:{position:"relative",minHeight:0,flex:1,overflowY:"auto"},children:(0,i.FD)(f.so,{direction:"col",gap:5,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]}),(0,i.FD)(f.xA,{columns:2,gap:4,children:[(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$20})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$24})}),(0,i.Y)(Y,{})]})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{sx:e=>({height:e.space.$3,width:e.sizes.$16})}),(0,i.Y)(Y,{})]}),(0,i.FD)(D,{children:[(0,i.Y)(b,{}),(0,i.Y)(b,{}),(0,i.Y)(b,{sx:{width:"66.666667%"}})]})]})}),[w,k]=(0,o.e3)("AddPaymentMethodRoot"),v=({children:e,checkout:t,...r})=>{var a;let l,c=(0,h.XX)(),s=(0,n.useRef)(null),{t:d}=(0,g._)(),[p,f]=(0,n.useState)(void 0),[$,b]=(0,n.useState)(void 0),[Y,D]=(0,n.useState)(void 0),x=(a=s.current,l=(0,m.K)().parsedInternalTheme,(0,n.useMemo)(()=>{if(!a)return;let{colors:e,fontWeights:t,fontSizes:r,radii:i,space:o}=l;return{colorPrimary:(0,u.G3)(a,e.$primary500,e.$colorBackground),colorBackground:(0,u.G3)(a,e.$colorInput,e.$colorBackground),colorText:(0,u.G3)(a,e.$colorForeground,e.$colorBackground),colorTextSecondary:(0,u.G3)(a,e.$colorMutedForeground,e.$colorBackground),colorSuccess:(0,u.G3)(a,e.$success500,e.$colorBackground),colorDanger:(0,u.G3)(a,e.$danger500,e.$colorBackground),colorWarning:(0,u.G3)(a,e.$warning500,e.$colorBackground),fontWeightNormal:(0,u.yJ)(a,"font-weight",t.$normal.toString()),fontWeightMedium:(0,u.yJ)(a,"font-weight",t.$medium.toString()),fontWeightBold:(0,u.yJ)(a,"font-weight",t.$bold.toString()),fontSizeXl:(0,u.yJ)(a,"font-size",r.$xl),fontSizeLg:(0,u.yJ)(a,"font-size",r.$lg),fontSizeSm:(0,u.yJ)(a,"font-size",r.$md),fontSizeXs:(0,u.yJ)(a,"font-size",r.$sm),borderRadius:(0,u.yJ)(a,"border-radius",i.$lg),spacingUnit:(0,u.yJ)(a,"padding",o.$1)}},[l,a]));return(0,i.FD)(w.Provider,{value:{value:{headerTitle:p,headerSubtitle:$,submitLabel:Y,setHeaderTitle:f,setHeaderSubtitle:b,setSubmitLabel:D,checkout:t,...r}},children:[(0,i.Y)("div",{ref:s,style:{display:"none"}}),(0,i.Y)(o.Tn,{checkout:t,for:c,stripeAppearance:x,paymentDescription:d((0,y.G)(t?.planPeriod==="month"?"billing.paymentMethod.applePayDescription.monthly":"billing.paymentMethod.applePayDescription.annual")),children:e})]})},F=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?null:e.children},_=e=>{let{isProviderReady:t}=(0,o.Jl)();return t?(0,i.Y)(i.FK,{children:e.children}):null},S=e=>{let{children:t,...r}=e;return(0,i.FD)(v,{...r,children:[(0,i.Y)(F,{children:(0,i.Y)(f.so,{direction:"row",align:"center",justify:"center",sx:e=>({width:"100%",minHeight:e.sizes.$60}),children:(0,i.Y)(f.y$,{size:"lg",colorScheme:"primary",elementDescriptor:$.$z.spinner})})}),(0,i.Y)(_,{children:(0,i.Y)(R,{children:t})})]})},z=(e,t)=>{(0,n.useRef)(()=>{t(e)}),(0,n.useEffect)(()=>{t(e)},[e,t])},G=({text:e})=>{let{setHeaderTitle:t}=k();return z(e,t),null},T=({text:e})=>{let{setHeaderSubtitle:t}=k();return z(e,t),null},M=({text:e})=>{let{setSubmitLabel:t}=k();return z(e,t),null},R=({children:e})=>{let{headerTitle:t,headerSubtitle:r,submitLabel:n,checkout:u,onSuccess:m,cancelAction:g}=k(),f=(0,l.f0)(),$=(0,h.N7)(),{isFormReady:b,submit:Y,reset:D}=(0,o.Jl)(),w=async e=>{e.preventDefault(),f.setLoading(),f.setError(void 0);let{data:t,error:r}=await Y();if(!r)try{await m(t)}catch(e){(0,p.H4)(e,[],f.setError)}finally{f.setIdle(),D()}};return(0,i.Y)(d.M,{headerTitle:t,headerSubtitle:r,children:(0,i.FD)(c.l.Root,{onSubmit:w,sx:e=>({display:"flex",flexDirection:"column",rowGap:e.space.$3}),children:[e,(0,i.Y)(o.cl,{fallback:(0,i.Y)(x,{})}),(0,i.Y)(a.Z.Alert,{children:f.error}),(0,i.Y)(s.G,{isDisabled:!b,submitLabel:n??(0,y.G)(`${$}.billingPage.paymentMethodsSection.formButtonPrimary__add`),onReset:g,hideReset:!g,sx:{flex:u?1:void 0}})]})})}},3369:function(e,t,r){r.d(t,{O:()=>s});var i=r(4518),o=r(8272),n=r(8920),a=r(2861),l=r(4967),c=r(5203);let s=({paymentMethod:e})=>(0,i.FD)(o.so,{sx:{overflow:"hidden"},gap:2,align:"baseline",elementDescriptor:n.$z.paymentMethodRow,children:[(0,i.Y)(o.In,{icon:"card"===e.paymentType?l.A:c.A,sx:e=>({alignSelf:"center",color:e.colors.$colorMutedForeground}),elementDescriptor:n.$z.paymentMethodRowIcon}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorForeground,textTransform:"capitalize"}),truncate:!0,elementDescriptor:n.$z.paymentMethodRowType,children:"card"===e.paymentType?e.cardType:e.paymentType}),(0,i.Y)(o.EY,{sx:e=>({color:e.colors.$colorMutedForeground}),variant:"caption",truncate:!0,elementDescriptor:n.$z.paymentMethodRowValue,children:"card"===e.paymentType?`⋯ ${e.last4}`:null}),e.isDefault&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("default"),localizationKey:(0,a.G)("badge__default")}),"expired"===e.status&&(0,i.Y)(o.Ex,{elementDescriptor:n.$z.paymentMethodRowBadge,elementId:n.$z.paymentMethodRowBadge.setId("expired"),colorScheme:"danger",localizationKey:(0,a.G)("badge__expired")})]})},3679:function(e,t,r){r.d(t,{V:()=>c});var i=r(4518),o=r(8272),n=r(2861);let a={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan",free_trial:"badge__freeTrial"},l={active:"secondary",upcoming:"primary",past_due:"warning",free_trial:"secondary"},c=({subscription:e,elementDescriptor:t})=>(0,i.Y)(o.Ex,{elementDescriptor:t,colorScheme:l[e.status],localizationKey:(0,n.G)(a[e.status])})}}]);

package/dist/components/Checkout/CheckoutPage.js

@@ -30,7 +30,7 @@ const FetchStatus = ({ children, status }) => {
 	if (useMemo(() => {
 		if (errors.global) {
 			const errorCodes = errors.global.flatMap((e) => {
-				if (e.isClerkApiResponseError()) return e.errors.map((e$1) => e$1.code);
+				if (e.isClerkAPIResponseError()) return e.errors.map((e$1) => e$1.code);
 			});
 			if (errorCodes.includes("missing_payer_email")) return "missing_payer_email";
 			if (errorCodes.includes("invalid_plan_change")) return "invalid_plan_change";

package/dist/components/Checkout/CheckoutPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckoutPage.js","names":["useCheckout","CheckoutProvider","e"],"sources":["../../../src/components/Checkout/CheckoutPage.tsx"],"sourcesContent":["import {\n  __experimental_CheckoutProvider as CheckoutProvider,\n  __experimental_useCheckout as useCheckout,\n} from '@clerk/shared/react';\nimport { useEffect, useMemo } from 'react';\n\nimport { useCheckoutContext } from '@/ui/contexts/components';\n\nconst Initiator = () => {\n  const { checkout } = useCheckout();\n\n  useEffect(() => {\n    void checkout.start();\n  }, []);\n  return null;\n};\n\nconst Root = ({ children }: { children: React.ReactNode }) => {\n  const { planId, planPeriod, for: _for } = useCheckoutContext();\n\n  return (\n    <CheckoutProvider\n      for={_for}\n      planId={\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        planId!\n      }\n      planPeriod={\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        planPeriod!\n      }\n    >\n      <Initiator />\n      {children}\n    </CheckoutProvider>\n  );\n};\n\nconst Stage = ({\n  children,\n  name,\n}: {\n  children: React.ReactNode;\n  name: ReturnType<typeof useCheckout>['checkout']['status'];\n}) => {\n  const { checkout } = useCheckout();\n  if (checkout.status !== name) {\n    return null;\n  }\n  return children;\n};\n\nconst FetchStatus = ({\n  children,\n  status,\n}: {\n  children: React.ReactNode;\n  status: 'idle' | 'fetching' | 'generic_error' | 'invalid_plan_change' | 'missing_payer_email';\n}) => {\n  const { errors, fetchStatus } = useCheckout();\n\n  const internalFetchStatus = useMemo(() => {\n    if (errors.global) {\n      const errorCodes = errors.global.flatMap(e => {\n        if (e.isClerkApiResponseError()) {\n          return e.errors.map(e => e.code);\n        }\n      });\n\n      if (errorCodes.includes('missing_payer_email')) {\n        return 'missing_payer_email';\n      }\n\n      if (errorCodes.includes('invalid_plan_change')) {\n        return 'invalid_plan_change';\n      }\n      return 'generic_error';\n    }\n\n    return fetchStatus;\n  }, [fetchStatus]);\n\n  if (internalFetchStatus !== status) {\n    return null;\n  }\n  return children;\n};\n\nexport { Root, Stage, FetchStatus };\n"],"mappings":";;;;;;AAQA,MAAM,kBAAkB;CACtB,MAAM,EAAE,aAAaA,4BAAa;AAElC,iBAAgB;AACd,EAAK,SAAS,OAAO;IACpB,EAAE,CAAC;AACN,QAAO;;AAGT,MAAM,QAAQ,EAAE,eAA8C;CAC5D,MAAM,EAAE,QAAQ,YAAY,KAAK,SAAS,oBAAoB;AAE9D,QACE,qBAACC;EACC,KAAK;EAGH;EAIA;aAGF,oBAAC,cAAY,EACZ;GACgB;;AAIvB,MAAM,SAAS,EACb,UACA,WAII;CACJ,MAAM,EAAE,aAAaD,4BAAa;AAClC,KAAI,SAAS,WAAW,KACtB,QAAO;AAET,QAAO;;AAGT,MAAM,eAAe,EACnB,UACA,aAII;CACJ,MAAM,EAAE,QAAQ,gBAAgBA,4BAAa;AAuB7C,KArB4B,cAAc;AACxC,MAAI,OAAO,QAAQ;GACjB,MAAM,aAAa,OAAO,OAAO,SAAQ,MAAK;AAC5C,QAAI,EAAE,yBAAyB,CAC7B,QAAO,EAAE,OAAO,KAAI,QAAKE,IAAE,KAAK;KAElC;AAEF,OAAI,WAAW,SAAS,sBAAsB,CAC5C,QAAO;AAGT,OAAI,WAAW,SAAS,sBAAsB,CAC5C,QAAO;AAET,UAAO;;AAGT,SAAO;IACN,CAAC,YAAY,CAAC,KAEW,OAC1B,QAAO;AAET,QAAO"}
+{"version":3,"file":"CheckoutPage.js","names":["useCheckout","CheckoutProvider","e"],"sources":["../../../src/components/Checkout/CheckoutPage.tsx"],"sourcesContent":["import {\n  __experimental_CheckoutProvider as CheckoutProvider,\n  __experimental_useCheckout as useCheckout,\n} from '@clerk/shared/react';\nimport { useEffect, useMemo } from 'react';\n\nimport { useCheckoutContext } from '@/ui/contexts/components';\n\nconst Initiator = () => {\n  const { checkout } = useCheckout();\n\n  useEffect(() => {\n    void checkout.start();\n  }, []);\n  return null;\n};\n\nconst Root = ({ children }: { children: React.ReactNode }) => {\n  const { planId, planPeriod, for: _for } = useCheckoutContext();\n\n  return (\n    <CheckoutProvider\n      for={_for}\n      planId={\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        planId!\n      }\n      planPeriod={\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n        planPeriod!\n      }\n    >\n      <Initiator />\n      {children}\n    </CheckoutProvider>\n  );\n};\n\nconst Stage = ({\n  children,\n  name,\n}: {\n  children: React.ReactNode;\n  name: ReturnType<typeof useCheckout>['checkout']['status'];\n}) => {\n  const { checkout } = useCheckout();\n  if (checkout.status !== name) {\n    return null;\n  }\n  return children;\n};\n\nconst FetchStatus = ({\n  children,\n  status,\n}: {\n  children: React.ReactNode;\n  status: 'idle' | 'fetching' | 'generic_error' | 'invalid_plan_change' | 'missing_payer_email';\n}) => {\n  const { errors, fetchStatus } = useCheckout();\n\n  const internalFetchStatus = useMemo(() => {\n    if (errors.global) {\n      const errorCodes = errors.global.flatMap(e => {\n        if (e.isClerkAPIResponseError()) {\n          return e.errors.map(e => e.code);\n        }\n      });\n\n      if (errorCodes.includes('missing_payer_email')) {\n        return 'missing_payer_email';\n      }\n\n      if (errorCodes.includes('invalid_plan_change')) {\n        return 'invalid_plan_change';\n      }\n      return 'generic_error';\n    }\n\n    return fetchStatus;\n  }, [fetchStatus]);\n\n  if (internalFetchStatus !== status) {\n    return null;\n  }\n  return children;\n};\n\nexport { Root, Stage, FetchStatus };\n"],"mappings":";;;;;;AAQA,MAAM,kBAAkB;CACtB,MAAM,EAAE,aAAaA,4BAAa;AAElC,iBAAgB;AACd,EAAK,SAAS,OAAO;IACpB,EAAE,CAAC;AACN,QAAO;;AAGT,MAAM,QAAQ,EAAE,eAA8C;CAC5D,MAAM,EAAE,QAAQ,YAAY,KAAK,SAAS,oBAAoB;AAE9D,QACE,qBAACC;EACC,KAAK;EAGH;EAIA;aAGF,oBAAC,cAAY,EACZ;GACgB;;AAIvB,MAAM,SAAS,EACb,UACA,WAII;CACJ,MAAM,EAAE,aAAaD,4BAAa;AAClC,KAAI,SAAS,WAAW,KACtB,QAAO;AAET,QAAO;;AAGT,MAAM,eAAe,EACnB,UACA,aAII;CACJ,MAAM,EAAE,QAAQ,gBAAgBA,4BAAa;AAuB7C,KArB4B,cAAc;AACxC,MAAI,OAAO,QAAQ;GACjB,MAAM,aAAa,OAAO,OAAO,SAAQ,MAAK;AAC5C,QAAI,EAAE,yBAAyB,CAC7B,QAAO,EAAE,OAAO,KAAI,QAAKE,IAAE,KAAK;KAElC;AAEF,OAAI,WAAW,SAAS,sBAAsB,CAC5C,QAAO;AAGT,OAAI,WAAW,SAAS,sBAAsB,CAC5C,QAAO;AAET,UAAO;;AAGT,SAAO;IACN,CAAC,YAAY,CAAC,KAEW,OAC1B,QAAO;AAET,QAAO"}

package/dist/components/Checkout/parts.js

@@ -33,7 +33,7 @@ const GenericError = () => {
 const InvalidPlanScreen = () => {
 	const { planPeriod } = useCheckoutContext();
 	const { errors } = __experimental_useCheckout();
-	const InvalidPlanError = errors?.global?.filter((e) => e.isClerkApiResponseError()).flatMap((e) => e.errors).find((e) => e.code === "invalid_plan_change");
+	const InvalidPlanError = errors?.global?.filter((e) => e.isClerkAPIResponseError()).flatMap((e) => e.errors).find((e) => e.code === "invalid_plan_change");
 	if (!InvalidPlanError) return null;
 	const { plan: planFromError, isPlanUpgradePossible } = InvalidPlanError?.meta || {};
 	return /* @__PURE__ */ jsx(Drawer.Body, { children: /* @__PURE__ */ jsxs(Flex, {

package/dist/components/Checkout/parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"parts.js","names":["useCheckout","t"],"sources":["../../../src/components/Checkout/parts.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\n\nimport { Alert } from '@/ui/elements/Alert';\nimport { Drawer, useDrawerContext } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\n\nimport { useCheckoutContext } from '../../contexts';\nimport { Box, descriptors, Flex, localizationKeys, useLocalizations } from '../../customizables';\nimport { EmailForm } from '../UserProfile/EmailForm';\n\nexport const GenericError = () => {\n  const { errors } = useCheckout();\n\n  const { translateError } = useLocalizations();\n  const { t } = useLocalizations();\n  return (\n    <Drawer.Body>\n      <Flex\n        align={'center'}\n        justify={'center'}\n        sx={t => ({\n          height: '100%',\n          padding: t.space.$4,\n          fontSize: t.fontSizes.$md,\n        })}\n      >\n        <Alert\n          variant='danger'\n          colorScheme='danger'\n        >\n          {errors.global\n            ? translateError(errors.global[0])\n            : t(localizationKeys('unstable__errors.form_param_value_invalid'))}\n        </Alert>\n      </Flex>\n    </Drawer.Body>\n  );\n};\n\nexport const InvalidPlanScreen = () => {\n  const { planPeriod } = useCheckoutContext();\n  const { errors } = useCheckout();\n\n  const InvalidPlanError = errors?.global\n    ?.filter(e => e.isClerkApiResponseError())\n    .flatMap(e => e.errors)\n    .find(e => e.code === 'invalid_plan_change');\n\n  if (!InvalidPlanError) {\n    return null;\n  }\n\n  const { plan: planFromError, isPlanUpgradePossible } = InvalidPlanError?.meta || {};\n\n  return (\n    <Drawer.Body>\n      <Flex\n        gap={4}\n        direction='col'\n      >\n        <Box\n          elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n          sx={t => ({\n            padding: t.space.$4,\n            borderBottomWidth: t.borderWidths.$normal,\n            borderBottomStyle: t.borderStyles.$solid,\n            borderBottomColor: t.colors.$borderAlpha100,\n          })}\n        >\n          <LineItems.Root>\n            <LineItems.Group>\n              <LineItems.Title\n                title={planFromError.name}\n                description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}\n              />\n              <LineItems.Description\n                prefix={planPeriod === 'annual' ? 'x12' : undefined}\n                text={`${planFromError.currency_symbol}${planPeriod === 'month' ? planFromError.amount_formatted : planFromError.annual_monthly_amount_formatted}`}\n                suffix={localizationKeys('billing.checkout.perMonth')}\n              />\n            </LineItems.Group>\n          </LineItems.Root>\n        </Box>\n        <Box sx={t => ({ padding: t.space.$4 })}>\n          <Alert\n            variant='info'\n            colorScheme='info'\n            title={\n              isPlanUpgradePossible\n                ? localizationKeys('billing.cannotSubscribeMonthly')\n                : localizationKeys('billing.cannotSubscribeUnrecoverable')\n            }\n          />\n        </Box>\n      </Flex>\n    </Drawer.Body>\n  );\n};\n\nexport const AddEmailForm = () => {\n  const { checkout } = useCheckout();\n  const { setIsOpen } = useDrawerContext();\n  return (\n    <Drawer.Body>\n      <Box\n        sx={t => ({\n          padding: t.space.$4,\n        })}\n      >\n        <EmailForm\n          title={localizationKeys('billing.checkout.emailForm.title')}\n          subtitle={localizationKeys('billing.checkout.emailForm.subtitle')}\n          onSuccess={() => void checkout.start()}\n          onReset={() => setIsOpen(false)}\n          disableAutoFocus\n        />\n      </Box>\n    </Drawer.Body>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,qBAAqB;CAChC,MAAM,EAAE,WAAWA,4BAAa;CAEhC,MAAM,EAAE,mBAAmB,kBAAkB;CAC7C,MAAM,EAAE,MAAM,kBAAkB;AAChC,QACE,oBAAC,OAAO,kBACN,oBAAC;EACC,OAAO;EACP,SAAS;EACT,KAAI,SAAM;GACR,QAAQ;GACR,SAASC,IAAE,MAAM;GACjB,UAAUA,IAAE,UAAU;GACvB;YAED,oBAAC;GACC,SAAQ;GACR,aAAY;aAEX,OAAO,SACJ,eAAe,OAAO,OAAO,GAAG,GAChC,EAAE,iBAAiB,4CAA4C,CAAC;IAC9D;GACH,GACK;;AAIlB,MAAa,0BAA0B;CACrC,MAAM,EAAE,eAAe,oBAAoB;CAC3C,MAAM,EAAE,WAAWD,4BAAa;CAEhC,MAAM,mBAAmB,QAAQ,QAC7B,QAAO,MAAK,EAAE,yBAAyB,CAAC,CACzC,SAAQ,MAAK,EAAE,OAAO,CACtB,MAAK,MAAK,EAAE,SAAS,sBAAsB;AAE9C,KAAI,CAAC,iBACH,QAAO;CAGT,MAAM,EAAE,MAAM,eAAe,0BAA0B,kBAAkB,QAAQ,EAAE;AAEnF,QACE,oBAAC,OAAO,kBACN,qBAAC;EACC,KAAK;EACL,WAAU;aAEV,oBAAC;GACC,mBAAmB,YAAY;GAC/B,KAAI,OAAM;IACR,SAAS,EAAE,MAAM;IACjB,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,OAAO;IAC7B;aAED,oBAAC,UAAU,kBACT,qBAAC,UAAU,oBACT,oBAAC,UAAU;IACT,OAAO,cAAc;IACrB,aAAa,eAAe,WAAW,iBAAiB,yBAAyB,GAAG;KACpF,EACF,oBAAC,UAAU;IACT,QAAQ,eAAe,WAAW,QAAQ;IAC1C,MAAM,GAAG,cAAc,kBAAkB,eAAe,UAAU,cAAc,mBAAmB,cAAc;IACjH,QAAQ,iBAAiB,4BAA4B;KACrD,IACc,GACH;IACb,EACN,oBAAC;GAAI,KAAI,OAAM,EAAE,SAAS,EAAE,MAAM,IAAI;aACpC,oBAAC;IACC,SAAQ;IACR,aAAY;IACZ,OACE,wBACI,iBAAiB,iCAAiC,GAClD,iBAAiB,uCAAuC;KAE9D;IACE;GACD,GACK;;AAIlB,MAAa,qBAAqB;CAChC,MAAM,EAAE,aAAaA,4BAAa;CAClC,MAAM,EAAE,cAAc,kBAAkB;AACxC,QACE,oBAAC,OAAO,kBACN,oBAAC;EACC,KAAI,OAAM,EACR,SAAS,EAAE,MAAM,IAClB;YAED,oBAAC;GACC,OAAO,iBAAiB,mCAAmC;GAC3D,UAAU,iBAAiB,sCAAsC;GACjE,iBAAiB,KAAK,SAAS,OAAO;GACtC,eAAe,UAAU,MAAM;GAC/B;IACA;GACE,GACM"}
+{"version":3,"file":"parts.js","names":["useCheckout","t"],"sources":["../../../src/components/Checkout/parts.tsx"],"sourcesContent":["import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';\n\nimport { Alert } from '@/ui/elements/Alert';\nimport { Drawer, useDrawerContext } from '@/ui/elements/Drawer';\nimport { LineItems } from '@/ui/elements/LineItems';\n\nimport { useCheckoutContext } from '../../contexts';\nimport { Box, descriptors, Flex, localizationKeys, useLocalizations } from '../../customizables';\nimport { EmailForm } from '../UserProfile/EmailForm';\n\nexport const GenericError = () => {\n  const { errors } = useCheckout();\n\n  const { translateError } = useLocalizations();\n  const { t } = useLocalizations();\n  return (\n    <Drawer.Body>\n      <Flex\n        align={'center'}\n        justify={'center'}\n        sx={t => ({\n          height: '100%',\n          padding: t.space.$4,\n          fontSize: t.fontSizes.$md,\n        })}\n      >\n        <Alert\n          variant='danger'\n          colorScheme='danger'\n        >\n          {errors.global\n            ? translateError(errors.global[0])\n            : t(localizationKeys('unstable__errors.form_param_value_invalid'))}\n        </Alert>\n      </Flex>\n    </Drawer.Body>\n  );\n};\n\nexport const InvalidPlanScreen = () => {\n  const { planPeriod } = useCheckoutContext();\n  const { errors } = useCheckout();\n\n  const InvalidPlanError = errors?.global\n    ?.filter(e => e.isClerkAPIResponseError())\n    .flatMap(e => e.errors)\n    .find(e => e.code === 'invalid_plan_change');\n\n  if (!InvalidPlanError) {\n    return null;\n  }\n\n  const { plan: planFromError, isPlanUpgradePossible } = InvalidPlanError?.meta || {};\n\n  return (\n    <Drawer.Body>\n      <Flex\n        gap={4}\n        direction='col'\n      >\n        <Box\n          elementDescriptor={descriptors.checkoutFormLineItemsRoot}\n          sx={t => ({\n            padding: t.space.$4,\n            borderBottomWidth: t.borderWidths.$normal,\n            borderBottomStyle: t.borderStyles.$solid,\n            borderBottomColor: t.colors.$borderAlpha100,\n          })}\n        >\n          <LineItems.Root>\n            <LineItems.Group>\n              <LineItems.Title\n                title={planFromError.name}\n                description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}\n              />\n              <LineItems.Description\n                prefix={planPeriod === 'annual' ? 'x12' : undefined}\n                text={`${planFromError.currency_symbol}${planPeriod === 'month' ? planFromError.amount_formatted : planFromError.annual_monthly_amount_formatted}`}\n                suffix={localizationKeys('billing.checkout.perMonth')}\n              />\n            </LineItems.Group>\n          </LineItems.Root>\n        </Box>\n        <Box sx={t => ({ padding: t.space.$4 })}>\n          <Alert\n            variant='info'\n            colorScheme='info'\n            title={\n              isPlanUpgradePossible\n                ? localizationKeys('billing.cannotSubscribeMonthly')\n                : localizationKeys('billing.cannotSubscribeUnrecoverable')\n            }\n          />\n        </Box>\n      </Flex>\n    </Drawer.Body>\n  );\n};\n\nexport const AddEmailForm = () => {\n  const { checkout } = useCheckout();\n  const { setIsOpen } = useDrawerContext();\n  return (\n    <Drawer.Body>\n      <Box\n        sx={t => ({\n          padding: t.space.$4,\n        })}\n      >\n        <EmailForm\n          title={localizationKeys('billing.checkout.emailForm.title')}\n          subtitle={localizationKeys('billing.checkout.emailForm.subtitle')}\n          onSuccess={() => void checkout.start()}\n          onReset={() => setIsOpen(false)}\n          disableAutoFocus\n        />\n      </Box>\n    </Drawer.Body>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAa,qBAAqB;CAChC,MAAM,EAAE,WAAWA,4BAAa;CAEhC,MAAM,EAAE,mBAAmB,kBAAkB;CAC7C,MAAM,EAAE,MAAM,kBAAkB;AAChC,QACE,oBAAC,OAAO,kBACN,oBAAC;EACC,OAAO;EACP,SAAS;EACT,KAAI,SAAM;GACR,QAAQ;GACR,SAASC,IAAE,MAAM;GACjB,UAAUA,IAAE,UAAU;GACvB;YAED,oBAAC;GACC,SAAQ;GACR,aAAY;aAEX,OAAO,SACJ,eAAe,OAAO,OAAO,GAAG,GAChC,EAAE,iBAAiB,4CAA4C,CAAC;IAC9D;GACH,GACK;;AAIlB,MAAa,0BAA0B;CACrC,MAAM,EAAE,eAAe,oBAAoB;CAC3C,MAAM,EAAE,WAAWD,4BAAa;CAEhC,MAAM,mBAAmB,QAAQ,QAC7B,QAAO,MAAK,EAAE,yBAAyB,CAAC,CACzC,SAAQ,MAAK,EAAE,OAAO,CACtB,MAAK,MAAK,EAAE,SAAS,sBAAsB;AAE9C,KAAI,CAAC,iBACH,QAAO;CAGT,MAAM,EAAE,MAAM,eAAe,0BAA0B,kBAAkB,QAAQ,EAAE;AAEnF,QACE,oBAAC,OAAO,kBACN,qBAAC;EACC,KAAK;EACL,WAAU;aAEV,oBAAC;GACC,mBAAmB,YAAY;GAC/B,KAAI,OAAM;IACR,SAAS,EAAE,MAAM;IACjB,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,aAAa;IAClC,mBAAmB,EAAE,OAAO;IAC7B;aAED,oBAAC,UAAU,kBACT,qBAAC,UAAU,oBACT,oBAAC,UAAU;IACT,OAAO,cAAc;IACrB,aAAa,eAAe,WAAW,iBAAiB,yBAAyB,GAAG;KACpF,EACF,oBAAC,UAAU;IACT,QAAQ,eAAe,WAAW,QAAQ;IAC1C,MAAM,GAAG,cAAc,kBAAkB,eAAe,UAAU,cAAc,mBAAmB,cAAc;IACjH,QAAQ,iBAAiB,4BAA4B;KACrD,IACc,GACH;IACb,EACN,oBAAC;GAAI,KAAI,OAAM,EAAE,SAAS,EAAE,MAAM,IAAI;aACpC,oBAAC;IACC,SAAQ;IACR,aAAY;IACZ,OACE,wBACI,iBAAiB,iCAAiC,GAClD,iBAAiB,uCAAuC;KAE9D;IACE;GACD,GACK;;AAIlB,MAAa,qBAAqB;CAChC,MAAM,EAAE,aAAaA,4BAAa;CAClC,MAAM,EAAE,cAAc,kBAAkB;AACxC,QACE,oBAAC,OAAO,kBACN,oBAAC;EACC,KAAI,OAAM,EACR,SAAS,EAAE,MAAM,IAClB;YAED,oBAAC;GACC,OAAO,iBAAiB,mCAAmC;GAC3D,UAAU,iBAAiB,sCAAsC;GACjE,iBAAiB,KAAK,SAAS,OAAO;GACtC,eAAe,UAAU,MAAM;GAC/B;IACA;GACE,GACM"}