@clerk/clerk-js
Version:
Clerk JS library
1 lines • 8.96 kB
JavaScript
;(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["965"],{1367:function(e,t,i){i.r(t),i.d(t,{SubscriptionDetails:()=>x});var n=i(9109),a=i(3799),o=i(9144),r=i(3559),l=i(1677),c=i(9629),s=i(8216),u=i(2672),p=i(1102),d=i(8e3),m=i(3009),b=i(8870),y=i(9082),h=i(1576),D=i(4204),g=i(5746);let S=o.createContext({confirmationOpen:!1,setConfirmationOpen:()=>{},subscription:null,setSubscription:()=>{}}),x=e=>(0,n.tZ)(D.Flow.Root,{flow:"subscriptionDetails",children:(0,n.tZ)(D.Flow.Part,{children:(0,n.tZ)(p.Drawer.Content,{children:(0,n.tZ)(l.I.Provider,{value:{componentName:"SubscriptionDetails",...e},children:(0,n.tZ)(h.SubscriberTypeContext.Provider,{value:e.for,children:(0,n.tZ)(Z,{...e})})})})})});function C(e){let{subscriptionItems:t,isLoading:i}=(0,h.useSubscription)(),n=t?.find(e=>"active"===e.status),a=t?.find(e=>"upcoming"===e.status),o=t?.find(e=>"past_due"===e.status);if(e?.or==="throw"&&!n&&!o)throw Error("No active or past due subscription found");return{upcomingSubscription:a,pastDueSubscription:o,activeSubscription:n,anySubscription:a||n||o,isLoading:i}}let Z=e=>{let[t,i]=(0,o.useState)(null),[a,r]=(0,o.useState)(!1),{subscriptionItems:l,isLoading:c}=(0,h.useSubscription)(),{activeSubscription:s,pastDueSubscription:u}=C();return c?(0,n.tZ)(D.Spinner,{sx:{margin:"auto"}}):s||u?(0,n.BX)(S.Provider,{value:{subscription:t,setSubscription:i,confirmationOpen:a,setConfirmationOpen:r},children:[(0,n.tZ)(p.Drawer.Header,{title:(0,D.localizationKeys)("commerce.subscriptionDetails.title")}),(0,n.tZ)(p.Drawer.Body,{sx:e=>({display:"flex",flexDirection:"column",flex:1,overflowY:"auto",padding:e.space.$4,gap:e.space.$4}),children:l?.map(t=>(0,n.tZ)(w,{subscription:t,...e},t.id))}),(0,n.tZ)(z,{})]}):null},z=(0,u.withCardStateProvider)(()=>{let e=(0,h.useSubscriberTypeContext)(),{organization:t}=(0,a.o8)(),{isLoading:i,error:r,setError:c,setLoading:d,setIdle:m}=(0,u.useCardState)(),{subscription:y,confirmationOpen:g,setConfirmationOpen:x}=(0,o.useContext)(S),{data:C}=(0,h.useSubscription)(),{setIsOpen:Z}=(0,p.useDrawerContext)(),{onSubscriptionCancel:z}=(0,l.F)(),v=(0,o.useCallback)(e=>x(e),[x]),w=(0,o.useCallback)(async()=>{y&&(c(void 0),d(),await y.cancel({orgId:"organization"===e?t?.id:void 0}).then(()=>{z?.(),Z&&Z(!1)}).catch(e=>{(0,b.S3)(e,[],c)}).finally(()=>{m()}))},[y,c,d,e,t?.id,z,Z,m]);return C?.nextPayment?(0,n.BX)(p.Drawer.Footer,{children:[(0,n.tZ)(f,{}),(0,n.tZ)(p.Drawer.Confirmation,{open:g,onOpenChange:v,actionsSlot:(0,n.BX)(n.HY,{children:[!i&&(0,n.tZ)(D.Button,{variant:"ghost",size:"sm",textVariant:"buttonLarge",onClick:()=>{m(),c(void 0),v(!1)},localizationKey:(0,D.localizationKeys)("commerce.keepSubscription")}),(0,n.tZ)(D.Button,{variant:"solid",colorScheme:"danger",size:"sm",textVariant:"buttonLarge",isLoading:i,onClick:()=>void w(),localizationKey:(0,D.localizationKeys)("commerce.cancelSubscription")})]}),children:y?(0,n.BX)(n.HY,{children:[(0,n.tZ)(D.Heading,{elementDescriptor:D.descriptors.drawerConfirmationTitle,as:"h2",textVariant:"h3",localizationKey:(0,D.localizationKeys)("commerce.cancelSubscriptionTitle",{plan:`${"upcoming"===y.status?"upcoming ":""}${y.plan.name}`})}),(0,n.tZ)(D.Text,{elementDescriptor:D.descriptors.drawerConfirmationDescription,colorScheme:"secondary",localizationKey:"upcoming"===y.status?(0,D.localizationKeys)("commerce.cancelSubscriptionNoCharge"):(0,D.localizationKeys)("commerce.cancelSubscriptionAccessUntil",{plan:y.plan.name,date:y.periodEndDate})}),(0,n.tZ)(s.m,{children:r})]}):null})]}):null});function f(){let{activeSubscription:e}=C({or:"throw"}),{data:t}=(0,h.useSubscription)();return t?.nextPayment&&e?(0,n.BX)(d.a.Root,{children:[(0,n.BX)(d.a.Group,{children:[(0,n.tZ)(d.a.Title,{description:(0,D.localizationKeys)("commerce.subscriptionDetails.currentBillingCycle")}),(0,n.tZ)(d.a.Description,{text:"month"===e.planPeriod?(0,D.localizationKeys)("commerce.monthly"):(0,D.localizationKeys)("commerce.annually")})]}),(0,n.BX)(d.a.Group,{children:[(0,n.tZ)(d.a.Title,{description:(0,D.localizationKeys)("commerce.subscriptionDetails.nextPaymentOn")}),(0,n.tZ)(d.a.Description,{text:(0,y.p)(t.nextPayment.date)})]}),(0,n.BX)(d.a.Group,{children:[(0,n.tZ)(d.a.Title,{description:(0,D.localizationKeys)("commerce.subscriptionDetails.nextPaymentAmount")}),(0,n.tZ)(d.a.Description,{prefix:t.nextPayment.amount.currency,text:`${t.nextPayment.amount.currencySymbol}${t.nextPayment.amount.amountFormatted}`})]})]}):null}let v=({subscription:e})=>{let{portalRoot:t}=(0,l.F)(),{__internal_openCheckout:i}=(0,a.cL)(),c=(0,h.useSubscriberTypeContext)(),{setIsOpen:s}=(0,p.useDrawerContext)(),{revalidateAll:u}=(0,h.usePlansContext)(),{setSubscription:d,setConfirmationOpen:b}=(0,o.useContext)(S),y=(0,r.N2)(e=>e({permission:"org:sys_billing:manage"})),g="user"===c||y,x=("month"===e.planPeriod&&e.plan.annualMonthlyAmount>0||"annual"===e.planPeriod)&&"past_due"!==e.status,C=!e.plan.hasBaseFee,Z=null===e.canceledAtDate&&!C&&"past_due"!==e.status,z=null!==e.canceledAtDate&&!C,f=(0,o.useCallback)(e=>{s&&s(!1),i({...e,onSubscriptionComplete:()=>{u()},portalRoot:t})},[i,u,t,s]),v=o.useMemo(()=>g?[x?{label:"month"===e.planPeriod?(0,D.localizationKeys)("commerce.switchToAnnualWithAnnualPrice",{price:e.plan.annualAmountFormatted,currency:e.plan.currencySymbol}):(0,D.localizationKeys)("commerce.switchToMonthlyWithPrice",{price:e.plan.amountFormatted,currency:e.plan.currencySymbol}),onClick:()=>{f({planId:e.plan.id,planPeriod:"month"===e.planPeriod?"annual":"month",for:c})}}:null,Z?{isDestructive:!0,label:(0,D.localizationKeys)("commerce.cancelSubscription"),onClick:()=>{d(e),b(!0)}}:null,z?{label:(0,D.localizationKeys)("commerce.reSubscribe"),onClick:()=>{f({planId:e.plan.id,planPeriod:e.planPeriod,for:c})}}:null].filter(e=>null!==e):[],[x,e,Z,f,c,d,g,z,b]);return 0===v.length?null:(0,n.tZ)(m.a,{variant:"bordered",actions:v})},w=({subscription:e})=>{let{t}=(0,D.useLocalizations)();return(0,n.BX)(D.Col,{elementDescriptor:D.descriptors.subscriptionDetailsCard,sx:e=>({borderRadius:e.radii.$md,boxShadow:e.shadows.$tableBodyShadow}),children:[(0,n.BX)(D.Col,{elementDescriptor:D.descriptors.subscriptionDetailsCardBody,gap:3,sx:e=>({padding:e.space.$3}),children:[(0,n.BX)(D.Flex,{elementDescriptor:D.descriptors.subscriptionDetailsCardHeader,align:"center",gap:2,children:[e.plan.avatarUrl?(0,n.tZ)(c.q,{boxElementDescriptor:D.descriptors.planDetailAvatar,size:e=>40,title:e.plan.name,rounded:!1,imageUrl:e.plan.avatarUrl}):null,(0,n.tZ)(D.Text,{elementDescriptor:D.descriptors.subscriptionDetailsCardTitle,variant:"h2",sx:e=>({fontSize:e.fontSizes.$lg,fontWeight:e.fontWeights.$semibold,color:e.colors.$colorForeground,marginInlineEnd:"auto"}),children:e.plan.name}),(0,n.tZ)(g.u,{subscription:e,elementDescriptor:D.descriptors.subscriptionDetailsCardBadge})]}),(0,n.BX)(D.Flex,{elementDescriptor:D.descriptors.subscriptionDetailsCardActions,justify:"between",align:"center",children:[(0,n.tZ)(D.Text,{variant:"body",colorScheme:"secondary",sx:e=>({fontWeight:e.fontWeights.$medium,textTransform:"lowercase"}),children:"month"===e.planPeriod?`${e.plan.currencySymbol}${e.plan.amountFormatted} / ${t((0,D.localizationKeys)("commerce.month"))}`:`${e.plan.currencySymbol}${e.plan.annualAmountFormatted} / ${t((0,D.localizationKeys)("commerce.year"))}`}),(0,n.tZ)(v,{subscription:e})]})]}),e.pastDueAt?(0,n.tZ)(K,{label:(0,D.localizationKeys)("commerce.subscriptionDetails.pastDueAt"),value:(0,y.p)(e.pastDueAt)}):null,"active"===e.status?(0,n.BX)(n.HY,{children:[(0,n.tZ)(K,{label:(0,D.localizationKeys)("commerce.subscriptionDetails.subscribedOn"),value:(0,y.p)(e.createdAt)}),e.periodEndDate&&(0,n.tZ)(K,{label:e.canceledAtDate?(0,D.localizationKeys)("commerce.subscriptionDetails.endsOn"):(0,D.localizationKeys)("commerce.subscriptionDetails.renewsAt"),value:(0,y.p)(e.periodEndDate)})]}):null,"upcoming"===e.status?(0,n.tZ)(K,{label:(0,D.localizationKeys)("commerce.subscriptionDetails.beginsOn"),value:(0,y.p)(e.periodStartDate)}):null]})},K=({label:e,value:t})=>(0,n.BX)(D.Flex,{elementDescriptor:D.descriptors.subscriptionDetailsDetailRow,justify:"between",align:"center",sx:e=>({paddingInline:e.space.$3,paddingBlock:e.space.$3,borderBlockStartWidth:e.borderWidths.$normal,borderBlockStartStyle:e.borderStyles.$solid,borderBlockStartColor:e.colors.$borderAlpha100}),children:[(0,n.tZ)(D.Text,{elementDescriptor:D.descriptors.subscriptionDetailsDetailRowLabel,localizationKey:e}),(0,n.tZ)(D.Text,{elementDescriptor:D.descriptors.subscriptionDetailsDetailRowValue,colorScheme:"secondary",children:t})]})},5746:function(e,t,i){i.d(t,{u:()=>l});var n=i(9109),a=i(4204);let o={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan"},r={active:"secondary",upcoming:"primary",past_due:"warning"},l=({subscription:e,elementDescriptor:t})=>(0,n.tZ)(a.Badge,{elementDescriptor:t,colorScheme:r[e.status],localizationKey:(0,a.localizationKeys)(o[e.status])})}}]);