@clerk/clerk-js/dist/subscriptionDetails_clerk.legacy.browser_85244b_5.79.0.js

Clerk JS library

"use strict";(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["965"],{51367:function(e,t,n){n.r(t),n.d(t,{SubscriptionDetails:()=>x}),n(92037),n(65223),n(38062),n(50725);var i=n(79109),o=n(83799),a=n(69144),r=n(13559),l=n(1677),c=n(29629),s=n(48216),u=n(2672),p=n(81102),d=n(28e3),m=n(33009),b=n(88870),y=n(39082),h=n(11576),D=n(64204),g=n(95746);let S=a.createContext({confirmationOpen:!1,setConfirmationOpen:()=>{},subscription:null,setSubscription:()=>{}}),x=e=>(0,i.tZ)(D.Flow.Root,{flow:"subscriptionDetails",children:(0,i.tZ)(D.Flow.Part,{children:(0,i.tZ)(p.Drawer.Content,{children:(0,i.tZ)(l.I.Provider,{value:{componentName:"SubscriptionDetails",...e},children:(0,i.tZ)(h.SubscriberTypeContext.Provider,{value:e.for,children:(0,i.tZ)(C,{...e})})})})})});function v(e){let{subscriptionItems:t,isLoading:n}=(0,h.useSubscription)(),i=null==t?void 0:t.find(e=>"active"===e.status),o=null==t?void 0:t.find(e=>"upcoming"===e.status),a=null==t?void 0:t.find(e=>"past_due"===e.status);if((null==e?void 0:e.or)==="throw"&&!i&&!a)throw Error("No active or past due subscription found");return{upcomingSubscription:o,pastDueSubscription:a,activeSubscription:i,anySubscription:o||i||a,isLoading:n}}let C=e=>{let[t,n]=(0,a.useState)(null),[o,r]=(0,a.useState)(!1),{subscriptionItems:l,isLoading:c}=(0,h.useSubscription)(),{activeSubscription:s,pastDueSubscription:u}=v();return c?(0,i.tZ)(D.Spinner,{sx:{margin:"auto"}}):s||u?(0,i.BX)(S.Provider,{value:{subscription:t,setSubscription:n,confirmationOpen:o,setConfirmationOpen:r},children:[(0,i.tZ)(p.Drawer.Header,{title:(0,D.localizationKeys)("commerce.subscriptionDetails.title")}),(0,i.tZ)(p.Drawer.Body,{sx:e=>({display:"flex",flexDirection:"column",flex:1,overflowY:"auto",padding:e.space.$4,gap:e.space.$4}),children:null==l?void 0:l.map(t=>(0,i.tZ)(w,{subscription:t,...e},t.id))}),(0,i.tZ)(Z,{})]}):null},Z=(0,u.withCardStateProvider)(()=>{let e=(0,h.useSubscriberTypeContext)(),{organization:t}=(0,o.o8)(),{isLoading:n,error:r,setError:c,setLoading:d,setIdle:m}=(0,u.useCardState)(),{subscription:y,confirmationOpen:g,setConfirmationOpen:x}=(0,a.useContext)(S),{data:v}=(0,h.useSubscription)(),{setIsOpen:C}=(0,p.useDrawerContext)(),{onSubscriptionCancel:Z}=(0,l.F)(),f=(0,a.useCallback)(e=>x(e),[x]),w=(0,a.useCallback)(async()=>{y&&(c(void 0),d(),await y.cancel({orgId:"organization"===e?null==t?void 0:t.id:void 0}).then(()=>{null==Z||Z(),C&&C(!1)}).catch(e=>{(0,b.S3)(e,[],c)}).finally(()=>{m()}))},[y,c,d,e,null==t?void 0:t.id,Z,C,m]);return(null==v?void 0:v.nextPayment)?(0,i.BX)(p.Drawer.Footer,{children:[(0,i.tZ)(z,{}),(0,i.tZ)(p.Drawer.Confirmation,{open:g,onOpenChange:f,actionsSlot:(0,i.BX)(i.HY,{children:[!n&&(0,i.tZ)(D.Button,{variant:"ghost",size:"sm",textVariant:"buttonLarge",onClick:()=>{m(),c(void 0),f(!1)},localizationKey:(0,D.localizationKeys)("commerce.keepSubscription")}),(0,i.tZ)(D.Button,{variant:"solid",colorScheme:"danger",size:"sm",textVariant:"buttonLarge",isLoading:n,onClick:()=>void w(),localizationKey:(0,D.localizationKeys)("commerce.cancelSubscription")})]}),children:y?(0,i.BX)(i.HY,{children:[(0,i.tZ)(D.Heading,{elementDescriptor:D.descriptors.drawerConfirmationTitle,as:"h2",textVariant:"h3",localizationKey:(0,D.localizationKeys)("commerce.cancelSubscriptionTitle",{plan:"".concat("upcoming"===y.status?"upcoming ":"").concat(y.plan.name)})}),(0,i.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,i.tZ)(s.m,{children:r})]}):null})]}):null});function z(){let{activeSubscription:e}=v({or:"throw"}),{data:t}=(0,h.useSubscription)();return(null==t?void 0:t.nextPayment)&&e?(0,i.BX)(d.a.Root,{children:[(0,i.BX)(d.a.Group,{children:[(0,i.tZ)(d.a.Title,{description:(0,D.localizationKeys)("commerce.subscriptionDetails.currentBillingCycle")}),(0,i.tZ)(d.a.Description,{text:"month"===e.planPeriod?(0,D.localizationKeys)("commerce.monthly"):(0,D.localizationKeys)("commerce.annually")})]}),(0,i.BX)(d.a.Group,{children:[(0,i.tZ)(d.a.Title,{description:(0,D.localizationKeys)("commerce.subscriptionDetails.nextPaymentOn")}),(0,i.tZ)(d.a.Description,{text:(0,y.p)(t.nextPayment.date)})]}),(0,i.BX)(d.a.Group,{children:[(0,i.tZ)(d.a.Title,{description:(0,D.localizationKeys)("commerce.subscriptionDetails.nextPaymentAmount")}),(0,i.tZ)(d.a.Description,{prefix:t.nextPayment.amount.currency,text:"".concat(t.nextPayment.amount.currencySymbol).concat(t.nextPayment.amount.amountFormatted)})]})]}):null}let f=e=>{let{subscription:t}=e,{portalRoot:n}=(0,l.F)(),{__internal_openCheckout:c}=(0,o.cL)(),s=(0,h.useSubscriberTypeContext)(),{setIsOpen:u}=(0,p.useDrawerContext)(),{revalidateAll:d}=(0,h.usePlansContext)(),{setSubscription:b,setConfirmationOpen:y}=(0,a.useContext)(S),g=(0,r.N2)(e=>e({permission:"org:sys_billing:manage"})),x="user"===s||g,v=("month"===t.planPeriod&&t.plan.annualMonthlyAmount>0||"annual"===t.planPeriod)&&"past_due"!==t.status,C=!t.plan.hasBaseFee,Z=null===t.canceledAtDate&&!C&&"past_due"!==t.status,z=null!==t.canceledAtDate&&!C,f=(0,a.useCallback)(e=>{u&&u(!1),c({...e,onSubscriptionComplete:()=>{d()},portalRoot:n})},[c,d,n,u]),w=a.useMemo(()=>x?[v?{label:"month"===t.planPeriod?(0,D.localizationKeys)("commerce.switchToAnnualWithAnnualPrice",{price:t.plan.annualAmountFormatted,currency:t.plan.currencySymbol}):(0,D.localizationKeys)("commerce.switchToMonthlyWithPrice",{price:t.plan.amountFormatted,currency:t.plan.currencySymbol}),onClick:()=>{f({planId:t.plan.id,planPeriod:"month"===t.planPeriod?"annual":"month",for:s})}}:null,Z?{isDestructive:!0,label:(0,D.localizationKeys)("commerce.cancelSubscription"),onClick:()=>{b(t),y(!0)}}:null,z?{label:(0,D.localizationKeys)("commerce.reSubscribe"),onClick:()=>{f({planId:t.plan.id,planPeriod:t.planPeriod,for:s})}}:null].filter(e=>null!==e):[],[v,t,Z,f,s,b,x,z,y]);return 0===w.length?null:(0,i.tZ)(m.a,{variant:"bordered",actions:w})},w=e=>{let{subscription:t}=e,{t:n}=(0,D.useLocalizations)();return(0,i.BX)(D.Col,{elementDescriptor:D.descriptors.subscriptionDetailsCard,sx:e=>({borderRadius:e.radii.$md,boxShadow:e.shadows.$tableBodyShadow}),children:[(0,i.BX)(D.Col,{elementDescriptor:D.descriptors.subscriptionDetailsCardBody,gap:3,sx:e=>({padding:e.space.$3}),children:[(0,i.BX)(D.Flex,{elementDescriptor:D.descriptors.subscriptionDetailsCardHeader,align:"center",gap:2,children:[t.plan.avatarUrl?(0,i.tZ)(c.q,{boxElementDescriptor:D.descriptors.planDetailAvatar,size:e=>40,title:t.plan.name,rounded:!1,imageUrl:t.plan.avatarUrl}):null,(0,i.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:t.plan.name}),(0,i.tZ)(g.u,{subscription:t,elementDescriptor:D.descriptors.subscriptionDetailsCardBadge})]}),(0,i.BX)(D.Flex,{elementDescriptor:D.descriptors.subscriptionDetailsCardActions,justify:"between",align:"center",children:[(0,i.tZ)(D.Text,{variant:"body",colorScheme:"secondary",sx:e=>({fontWeight:e.fontWeights.$medium,textTransform:"lowercase"}),children:"month"===t.planPeriod?"".concat(t.plan.currencySymbol).concat(t.plan.amountFormatted," / ").concat(n((0,D.localizationKeys)("commerce.month"))):"".concat(t.plan.currencySymbol).concat(t.plan.annualAmountFormatted," / ").concat(n((0,D.localizationKeys)("commerce.year")))}),(0,i.tZ)(f,{subscription:t})]})]}),t.pastDueAt?(0,i.tZ)(K,{label:(0,D.localizationKeys)("commerce.subscriptionDetails.pastDueAt"),value:(0,y.p)(t.pastDueAt)}):null,"active"===t.status?(0,i.BX)(i.HY,{children:[(0,i.tZ)(K,{label:(0,D.localizationKeys)("commerce.subscriptionDetails.subscribedOn"),value:(0,y.p)(t.createdAt)}),t.periodEndDate&&(0,i.tZ)(K,{label:t.canceledAtDate?(0,D.localizationKeys)("commerce.subscriptionDetails.endsOn"):(0,D.localizationKeys)("commerce.subscriptionDetails.renewsAt"),value:(0,y.p)(t.periodEndDate)})]}):null,"upcoming"===t.status?(0,i.tZ)(K,{label:(0,D.localizationKeys)("commerce.subscriptionDetails.beginsOn"),value:(0,y.p)(t.periodStartDate)}):null]})},K=e=>{let{label:t,value:n}=e;return(0,i.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,i.tZ)(D.Text,{elementDescriptor:D.descriptors.subscriptionDetailsDetailRowLabel,localizationKey:t}),(0,i.tZ)(D.Text,{elementDescriptor:D.descriptors.subscriptionDetailsDetailRowValue,colorScheme:"secondary",children:n})]})}},95746:function(e,t,n){n.d(t,{u:()=>l});var i=n(79109),o=n(64204);let a={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan"},r={active:"secondary",upcoming:"primary",past_due:"warning"},l=e=>{let{subscription:t,elementDescriptor:n}=e;return(0,i.tZ)(o.Badge,{elementDescriptor:n,colorScheme:r[t.status],localizationKey:(0,o.localizationKeys)(a[t.status])})}}}]);