https://clerk.trapar.co/npm/@clerk/[email protected]/dist/subscriptionDetails_clerk.browser_70f75e_5.128.0.js

1"use strict";(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["6965"],{51367:function(e,i,t){t.r(i),t.d(i,{SubscriptionDetails:()=>S});var n=t(73312),l=t(61869),a=t(69144),r=t(13559),o=t(1677),s=t(29629),c=t(48216),u=t(2672),p=t(81102),d=t(28e3),b=t(88870),m=t(39082),g=t(11576),y=t(64204),h=t(95746);let D=a.createContext({confirmationOpen:!1,setConfirmationOpen:()=>{},subscription:null,setSubscription:()=>{}}),S=e=>(0,n.tZ)(y.Flow.Root,{flow:"subscriptionDetails",children:(0,n.tZ)(y.Flow.Part,{children:(0,n.tZ)(p.Drawer.Content,{children:(0,n.tZ)(o.I.Provider,{value:{componentName:"SubscriptionDetails",...e},children:(0,n.tZ)(g.SubscriberTypeContext.Provider,{value:e.for,children:(0,n.tZ)(z,{...e})})})})})});function x(e){let{subscriptionItems:i,isLoading:t}=(0,g.useSubscription)(),n=i?.find(e=>"active"===e.status),l=i?.find(e=>"upcoming"===e.status),a=i?.find(e=>"past_due"===e.status);if(e?.or==="throw"&&!n&&!a)throw Error("No active or past due subscription found");return{upcomingSubscription:l,pastDueSubscription:a,activeSubscription:n,anySubscription:l||n||a,isLoading:t}}let z=e=>{let[i,t]=(0,a.useState)(null),[l,r]=(0,a.useState)(!1),{subscriptionItems:o,isLoading:s}=(0,g.useSubscription)(),{activeSubscription:c,pastDueSubscription:u}=x();return s?(0,n.tZ)(y.Spinner,{sx:{margin:"auto"}}):c||u?(0,n.BX)(D.Provider,{value:{subscription:i,setSubscription:t,confirmationOpen:l,setConfirmationOpen:r},children:[(0,n.tZ)(p.Drawer.Header,{title:(0,y.localizationKeys)("billing.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:o?.map(i=>(0,n.tZ)(Z,{subscription:i,...e},i.id))}),(0,n.tZ)(f,{})]}):null},f=(0,u.withCardStateProvider)(()=>{let e=(0,g.useSubscriberTypeContext)(),{isLoading:i,error:t,setError:r,setLoading:s,setIdle:d}=(0,u.useCardState)(),{subscription:m,confirmationOpen:h,setConfirmationOpen:S}=(0,a.useContext)(D),{data:x}=(0,g.useSubscription)(),{setIsOpen:z}=(0,p.useDrawerContext)(),{onSubscriptionCancel:f}=(0,o.F)(),v=(0,l.mP)(),Z=(0,a.useCallback)(e=>S(e),[S]),K=(0,a.useCallback)(async()=>{m&&(r(void 0),s(),await m.cancel({orgId:"organization"===e?v?.organization?.id:void 0}).then(()=>{f?.(),z&&z(!1)}).catch(e=>{(0,b.S3)(e,[],r)}).finally(()=>{d()}))},[m,r,s,e,v?.organization?.id,f,z,d]);return x?.nextPayment?(0,n.BX)(p.Drawer.Footer,{children:[(0,n.tZ)(C,{}),(0,n.tZ)(p.Drawer.Confirmation,{open:h,onOpenChange:Z,actionsSlot:(0,n.BX)(n.HY,{children:[!i&&(0,n.tZ)(y.Button,{variant:"ghost",size:"sm",textVariant:"buttonLarge",onClick:()=>{d(),r(void 0),Z(!1)},localizationKey:m?.isFreeTrial?(0,y.localizationKeys)("billing.keepFreeTrial"):(0,y.localizationKeys)("billing.keepSubscription")}),(0,n.tZ)(y.Button,{variant:"solid",colorScheme:"danger",size:"sm",textVariant:"buttonLarge",isLoading:i,onClick:()=>void K(),localizationKey:m?.isFreeTrial?(0,y.localizationKeys)("billing.cancelFreeTrial",{plan:m.plan.name}):(0,y.localizationKeys)("billing.cancelSubscription")})]}),children:m?(0,n.BX)(n.HY,{children:[(0,n.tZ)(y.Heading,{elementDescriptor:y.descriptors.drawerConfirmationTitle,as:"h2",textVariant:"h3",localizationKey:m?.isFreeTrial?(0,y.localizationKeys)("billing.cancelFreeTrialTitle",{plan:m.plan.name}):(0,y.localizationKeys)("billing.cancelSubscriptionTitle",{plan:`${"upcoming"===m.status?"upcoming ":""}${m.plan.name}`})}),(0,n.tZ)(y.Text,{elementDescriptor:y.descriptors.drawerConfirmationDescription,colorScheme:"secondary",localizationKey:m?.isFreeTrial?(0,y.localizationKeys)("billing.cancelFreeTrialAccessUntil",{plan:m.plan.name,date:m.periodEnd}):"upcoming"===m.status?(0,y.localizationKeys)("billing.cancelSubscriptionNoCharge"):"past_due"===m.status?(0,y.localizationKeys)("billing.cancelSubscriptionPastDue"):(0,y.localizationKeys)("billing.cancelSubscriptionAccessUntil",{plan:m.plan.name,date:m.periodEnd})}),(0,n.tZ)(c.m,{children:t})]}):null})]}):null});function C(){let{activeSubscription:e}=x({or:"throw"}),{data:i}=(0,g.useSubscription)();if(!i?.nextPayment||!e)return null;let{isFreeTrial:t}=e;return(0,n.BX)(d.a.Root,{children:[(0,n.BX)(d.a.Group,{children:[(0,n.tZ)(d.a.Title,{description:(0,y.localizationKeys)("billing.subscriptionDetail

1s.currentBillingCycle")}),(0,n.tZ)(d.a.Description,{text:"month"===e.planPeriod?(0,y.localizationKeys)("billing.monthly"):(0,y.localizationKeys)("billing.annually")})]}),(0,n.BX)(d.a.Group,{children:[(0,n.tZ)(d.a.Title,{description:(0,y.localizationKeys)(`billing.subscriptionDetails.${t?"firstPaymentOn":"nextPaymentOn"}`)}),(0,n.tZ)(d.a.Description,{text:(0,m.p)(i.nextPayment.date)})]}),(0,n.BX)(d.a.Group,{children:[(0,n.tZ)(d.a.Title,{description:(0,y.localizationKeys)(`billing.subscriptionDetails.${t?"firstPaymentAmount":"nextPaymentAmount"}`)}),(0,n.tZ)(d.a.Description,{prefix:i.nextPayment.amount.currency,text:`${i.nextPayment.amount.currencySymbol}${i.nextPayment.amount.amountFormatted}`})]})]})}let v=({subscription:e})=>{let{portalRoot:i}=(0,o.F)(),{__internal_openCheckout:t}=(0,l.cL)(),s=(0,g.useSubscriberTypeContext)(),{setIsOpen:c}=(0,p.useDrawerContext)(),{revalidateAll:u}=(0,g.usePlansContext)(),{setSubscription:d,setConfirmationOpen:b}=(0,a.useContext)(D),m=(0,r.N2)(e=>e({permission:"org:sys_billing:manage"})),h="user"===s||m,S=("month"===e.planPeriod&&!!e.plan.annualMonthlyFee||"annual"===e.planPeriod)&&"past_due"!==e.status,x=!e.plan.hasBaseFee,z=null===e.canceledAt&&!x,f=null!==e.canceledAt&&!x,C=(0,a.useCallback)(e=>{c&&c(!1),t({...e,onSubscriptionComplete:()=>{u()},portalRoot:i})},[t,u,i,c]),v=a.useMemo(()=>h?[S?{label:"month"===e.planPeriod?(0,y.localizationKeys)("billing.switchToAnnualWithAnnualPrice",{price:(0,g.normalizeFormatted)(e.plan.annualFee.amountFormatted),currency:e.plan.annualFee.currencySymbol}):(0,y.localizationKeys)("billing.switchToMonthlyWithPrice",{price:(0,g.normalizeFormatted)(e.plan.fee.amountFormatted),currency:e.plan.fee.currencySymbol}),onClick:()=>{C({planId:e.plan.id,planPeriod:"month"===e.planPeriod?"annual":"month",for:s})}}:null,z?{isDestructive:!0,label:e.isFreeTrial?(0,y.localizationKeys)("billing.cancelFreeTrial",{plan:e.plan.name}):(0,y.localizationKeys)("billing.cancelSubscription"),onClick:()=>{d(e),b(!0)}}:null,f?{label:(0,y.localizationKeys)("billing.reSubscribe"),onClick:()=>{C({planId:e.plan.id,planPeriod:e.planPeriod,for:s})}}:null].filter(e=>null!==e):[],[S,e,z,C,s,d,h,f,b]);return 0===v.length?null:(0,n.tZ)(y.Flex,{elementDescriptor:y.descriptors.subscriptionDetailsCardActions,gap:2,sx:e=>({paddingInline:e.space.$3,paddingBlock:e.space.$3,borderBlockStartWidth:e.borderWidths.$normal,borderBlockStartStyle:e.borderStyles.$solid,borderBlockStartColor:e.colors.$borderAlpha100}),children:v.map((e,i)=>(0,n.tZ)(y.Button,{elementDescriptor:e.isDestructive?y.descriptors.subscriptionDetailsCancelButton:y.descriptors.subscriptionDetailsActionButton,variant:e.isDestructive?"ghost":"outline",colorScheme:e.isDestructive?"danger":void 0,size:"xs",textVariant:"buttonSmall",onClick:e.onClick,localizationKey:e.label},i))})},Z=({subscription:e})=>{let{t:i}=(0,y.useLocalizations)(),t="month"===e.planPeriod?e.plan.fee:e.plan.annualFee;return(0,n.BX)(y.Col,{elementDescriptor:y.descriptors.subscriptionDetailsCard,sx:e=>({borderRadius:e.radii.$md,boxShadow:e.shadows.$tableBodyShadow}),children:[(0,n.BX)(y.Col,{elementDescriptor:y.descriptors.subscriptionDetailsCardBody,gap:3,sx:e=>({padding:e.space.$3}),children:[(0,n.BX)(y.Flex,{elementDescriptor:y.descriptors.subscriptionDetailsCardHeader,align:"center",gap:2,children:[e.plan.avatarUrl?(0,n.tZ)(s.q,{boxElementDescriptor:y.descriptors.planDetailAvatar,size:e=>40,title:e.plan.name,rounded:!1,imageUrl:e.plan.avatarUrl}):null,(0,n.tZ)(y.Text,{elementDescriptor:y.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)(h.u,{subscription:e.isFreeTrial?{status:"free_trial"}:e,elementDescriptor:y.descriptors.subscriptionDetailsCardBadge})]}),(0,n.tZ)(y.Flex,{justify:"between",align:"center",children:(0,n.BX)(y.Text,{variant:"body",colorScheme:"secondary",sx:e=>({fontWeight:e.fontWeights.$medium,textTransform:"lowercase"}),children:[t.currencySymbol,t.amountFormatted," /"," ",i((0,y.localizationKeys)(`billing.${"month"===e.planPeriod?"month":"year"}`))]})})]}),e.pastDueAt?(0,n.tZ)(K,{label:(0,y.localizationKeys)("billing.subscriptionDetail

1s.pastDueAt"),value:(0,m.p)(e.pastDueAt)}):null,"active"===e.status?(0,n.BX)(n.HY,{children:[(0,n.tZ)(K,{label:e.isFreeTrial?(0,y.localizationKeys)("billing.subscriptionDetails.trialStartedOn"):(0,y.localizationKeys)("billing.subscriptionDetails.subscribedOn"),value:(0,m.p)(e.createdAt)}),e.periodEnd&&(0,n.tZ)(K,{label:e.canceledAt?(0,y.localizationKeys)("billing.subscriptionDetails.endsOn"):e.isFreeTrial?(0,y.localizationKeys)("billing.subscriptionDetails.trialEndsOn"):(0,y.localizationKeys)("billing.subscriptionDetails.renewsAt"),value:(0,m.p)(e.periodEnd)})]}):null,"upcoming"===e.status?(0,n.tZ)(K,{label:(0,y.localizationKeys)("billing.subscriptionDetails.beginsOn"),value:(0,m.p)(e.periodStart)}):null,(0,n.tZ)(v,{subscription:e})]})},K=({label:e,value:i})=>(0,n.BX)(y.Flex,{elementDescriptor:y.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)(y.Text,{elementDescriptor:y.descriptors.subscriptionDetailsDetailRowLabel,localizationKey:e}),(0,n.tZ)(y.Text,{elementDescriptor:y.descriptors.subscriptionDetailsDetailRowValue,colorScheme:"secondary",children:i})]})},95746:function(e,i,t){t.d(i,{u:()=>o});var n=t(73312),l=t(64204);let a={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan",free_trial:"badge__freeTrial"},r={active:"secondary",upcoming:"primary",past_due:"warning",free_trial:"secondary"},o=({subscription:e,elementDescriptor:i})=>(0,n.tZ)(l.Badge,{elementDescriptor:i,colorScheme:r[e.status],localizationKey:(0,l.localizationKeys)(a[e.status])})}}]);