@clerk/clerk-js/dist/planDetails_clerk.chips.browser_c495c5_5.79.0.js

Clerk JS library

"use strict";(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["33"],{5207:function(e,t,r){r.r(t),r.d(t,{PlanDetails:()=>u});var a=r(9109),l=r(3799),n=r(9144),i=r(7901),o=r(9117),s=r(9629),c=r(1102),p=r(4142),d=r(1576),m=r(4204);let u=e=>(0,a.tZ)(c.Drawer.Content,{children:(0,a.tZ)(g,{...e})}),h=({children:e})=>(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:e}),D=({error:e})=>{let{translateError:t}=(0,m.useLocalizations)();return(0,a.tZ)(h,{children:(0,a.tZ)(o.b,{variant:"danger",colorScheme:"danger",children:t(e.errors[0])})})},g=({planId:e,plan:t,initialPlanPeriod:r="month"})=>{let o=(0,l.cL)(),[p,u]=(0,n.useState)(r),{data:g,isLoading:y,error:f}=(0,i.default)(e||t?{type:"plan",id:e||t?.id}:null,()=>o.billing.getPlan({id:e||t?.id}),{fallbackData:t,revalidateOnFocus:!1,shouldRetryOnError:!1,keepPreviousData:!0});if(y&&!t)return(0,a.tZ)(h,{children:(0,a.tZ)(m.Spinner,{})});if(!g&&f)return(0,a.tZ)(D,{error:f});if(!g)return null;let Z=g.features,b=Z.length>0;return(0,a.BX)(d.SubscriberTypeContext.Provider,{value:"org"===g.forPayerType?"organization":"user",children:[(0,a.tZ)(c.Drawer.Header,{sx:e=>b?null:{flex:1,borderBottomWidth:0,background:e.colors.$colorBackground},children:(0,a.tZ)(x,{plan:g,planPeriod:p,setPlanPeriod:u,closeSlot:(0,a.tZ)(c.Drawer.Close,{})})}),b?(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:Z.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})})]})})}}]);