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

Clerk JS library

"use strict";(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["33"],{65207:function(e,t,r){r.r(t),r.d(t,{PlanDetails:()=>u}),r(65223);var a=r(79109),l=r(83799),n=r(69144),i=r(7901),o=r(9117),s=r(29629),c=r(81102),p=r(67322),d=r(11576),m=r(64204);let u=e=>(0,a.tZ)(c.Drawer.Content,{children:(0,a.tZ)(g,{...e})}),h=e=>{let{children:t}=e;return(0,a.tZ)(c.Drawer.Body,{sx:e=>({display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",flex:1,overflowY:"auto",padding:e.space.$4,gap:e.space.$4}),children:t})},D=e=>{let{error:t}=e,{translateError:r}=(0,m.useLocalizations)();return(0,a.tZ)(h,{children:(0,a.tZ)(o.b,{variant:"danger",colorScheme:"danger",children:r(t.errors[0])})})},g=e=>{let{planId:t,plan:r,initialPlanPeriod:o="month"}=e,p=(0,l.cL)(),[u,g]=(0,n.useState)(o),{data:y,isLoading:f,error:Z}=(0,i.default)(t||r?{type:"plan",id:t||(null==r?void 0:r.id)}:null,()=>p.billing.getPlan({id:t||(null==r?void 0:r.id)}),{fallbackData:r,revalidateOnFocus:!1,shouldRetryOnError:!1,keepPreviousData:!0});if(f&&!r)return(0,a.tZ)(h,{children:(0,a.tZ)(m.Spinner,{})});if(!y&&Z)return(0,a.tZ)(D,{error:Z});if(!y)return null;let b=y.features,v=b.length>0;return(0,a.BX)(d.SubscriberTypeContext.Provider,{value:"org"===y.forPayerType?"organization":"user",children:[(0,a.tZ)(c.Drawer.Header,{sx:e=>v?null:{flex:1,borderBottomWidth:0,background:e.colors.$colorBackground},children:(0,a.tZ)(x,{plan:y,planPeriod:u,setPlanPeriod:g,closeSlot:(0,a.tZ)(c.Drawer.Close,{})})}),v?(0,a.BX)(c.Drawer.Body,{children:[(0,a.tZ)(m.Text,{elementDescriptor:m.descriptors.planDetailCaption,variant:"caption",localizationKey:(0,m.localizationKeys)("commerce.availableFeatures"),colorScheme:"secondary",sx:e=>({padding:e.space.$4,paddingBottom:0})}),(0,a.tZ)(m.Box,{elementDescriptor:m.descriptors.planDetailFeaturesList,as:"ul",role:"list",sx:e=>({display:"grid",rowGap:e.space.$6,padding:e.space.$4,margin:0}),children:b.map(e=>(0,a.BX)(m.Box,{elementDescriptor:m.descriptors.planDetailFeaturesListItem,as:"li",sx:e=>({display:"flex",alignItems:"baseline",gap:e.space.$3}),children:[e.avatarUrl?(0,a.tZ)(s.q,{size:e=>24,title:e.name,initials:e.name[0],rounded:!1,imageUrl:e.avatarUrl}):null,(0,a.BX)(m.Span,{elementDescriptor:m.descriptors.planDetailFeaturesListItemContent,children:[(0,a.tZ)(m.Text,{elementDescriptor:m.descriptors.planDetailFeaturesListItemTitle,colorScheme:"body",sx:e=>({fontWeight:e.fontWeights.$medium}),children:e.name}),e.description?(0,a.tZ)(m.Text,{elementDescriptor:m.descriptors.planDetailFeaturesListItemDescription,colorScheme:"secondary",sx:e=>({marginBlockStart:e.space.$0x25}),children:e.description}):null]})]},e.id))})]}):null]})},x=n.forwardRef((e,t)=>{let{plan:r,closeSlot:l,planPeriod:i,setPlanPeriod:o}=e,c=(0,n.useMemo)(()=>r.annualMonthlyAmount<=0?r.amountFormatted:"annual"===i?r.annualMonthlyAmountFormatted:r.amountFormatted,[r,i]);return(0,a.BX)(m.Box,{ref:t,elementDescriptor:m.descriptors.planDetailHeader,sx:e=>({width:"100%",padding:e.space.$4,position:"relative"}),children:[l?(0,a.tZ)(m.Box,{sx:e=>({position:"absolute",top:e.space.$2,insetInlineEnd:e.space.$2}),children:l}):null,(0,a.BX)(m.Col,{gap:3,elementDescriptor:m.descriptors.planDetailBadgeAvatarTitleDescriptionContainer,children:[r.avatarUrl?(0,a.tZ)(s.q,{boxElementDescriptor:m.descriptors.planDetailAvatar,size:e=>40,title:r.name,initials:r.name[0],rounded:!1,imageUrl:r.avatarUrl,sx:e=>({marginBlockEnd:e.space.$3})}):null,(0,a.BX)(m.Col,{gap:1,elementDescriptor:m.descriptors.planDetailTitleDescriptionContainer,children:[(0,a.tZ)(m.Heading,{elementDescriptor:m.descriptors.planDetailTitle,as:"h2",textVariant:"h2",children:r.name}),r.description?(0,a.tZ)(m.Text,{elementDescriptor:m.descriptors.planDetailDescription,variant:"subtitle",colorScheme:"secondary",children:r.description}):null]})]}),(0,a.tZ)(m.Flex,{elementDescriptor:m.descriptors.planDetailFeeContainer,align:"center",wrap:"wrap",sx:e=>({marginTop:e.space.$3,columnGap:e.space.$1x5}),children:(0,a.BX)(a.HY,{children:[(0,a.BX)(m.Text,{elementDescriptor:m.descriptors.planDetailFee,variant:"h1",colorScheme:"body",children:[r.currencySymbol,c]}),(0,a.tZ)(m.Text,{elementDescriptor:m.descriptors.planDetailFeePeriod,variant:"caption",colorScheme:"secondary",sx:e=>({textTransform:"lowercase",":before":{content:'"/"',marginInlineEnd:e.space.$1}}),localizationKey:(0,m.localizationKeys)("commerce.month")})]})}),r.annualMonthlyAmount>0?(0,a.tZ)(m.Box,{elementDescriptor:m.descriptors.planDetailPeriodToggle,sx:e=>({display:"flex",marginTop:e.space.$3}),children:(0,a.tZ)(p.r,{isChecked:"annual"===i,onChange:e=>o(e?"annual":"month"),label:(0,m.localizationKeys)("commerce.billedAnnually")})}):(0,a.tZ)(m.Text,{elementDescriptor:m.descriptors.pricingTableCardFeePeriodNotice,variant:"caption",colorScheme:"secondary",localizationKey:r.isDefault?(0,m.localizationKeys)("commerce.alwaysFree"):(0,m.localizationKeys)("commerce.billedMonthlyOnly"),sx:e=>({justifySelf:"flex-start",alignSelf:"center",marginTop:e.space.$3})})]})})}}]);