@clerk/clerk-js/dist/66_clerk.legacy.browser_85244b_5.79.0.js

Clerk JS library

"use strict";(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["66"],{65006:function(e,r,t){t.d(r,{b:()=>D}),t(65223);var i=t(79109),a=t(83799),o=t(69144),n=t(38873),l=t(11576),c=t(67322),s=t(19732),d=t(2432),p=t(8969),m=t(64204),u=t(96519),g=t(51217),h=t(95746);function x(e){let{plans:r,planPeriod:t,setPlanPeriod:a,onSelect:o,isCompact:n,props:l}=e;return(0,i.tZ)(g.InternalThemeProvider,{children:(0,i.tZ)(m.Box,{elementDescriptor:m.descriptors.pricingTable,sx:e=>({"--grid-min-size":n?"11.75rem":"20rem","--grid-max-columns":"infinity","--grid-gap":e.space.$4,"--max-column-width":"100% / var(--grid-max-columns, infinity) - var(--grid-gap)","--column-width":"max(var(--max-column-width), min(var(--grid-min-size, 10rem), 100%))",display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(var(--column-width), 1fr))",gridTemplateRows:"auto 1fr",gap:"var(--grid-gap-y, var(--grid-gap, ".concat(e.space.$4,")) var(--grid-gap, ").concat(e.space.$4,")"),alignItems:"stretch",width:"100%",minWidth:"0"}),"data-variant":n?"compact":"default",children:null==r?void 0:r.map(e=>(0,i.tZ)(b,{plan:e,planPeriod:t,setPlanPeriod:a,onSelect:o,props:l,isCompact:n},e.id))})})}function b(e){let{plan:r,planPeriod:t,setPlanPeriod:n,onSelect:c,props:u,isCompact:x=!1}=e,b=(0,a.cL)(),{isSignedIn:B}=(0,a.kP)(),{mode:f="mounted",ctaPosition:$}=(0,l.usePricingTableContext)(),C=(0,l.useSubscriberTypeContext)(),S=u.ctaPosition||$||"bottom",w=u.collapseFeatures||!1,{id:v,slug:D}=r,Z=(0,p.N2)(e=>e({permission:"org:sys_billing:manage"})||"user"===C),{buttonPropsForPlan:P,activeOrUpcomingSubscriptionBasedOnPlanPeriod:M}=(0,l.usePlansContext)(),k=o.useMemo(()=>M(r,t),[r,t,M]),z=r.features.length>0,F=!!k,I=!1,R=!1;return k?"upcoming"===k.status?(I=!0,R=!0):(I="active"===k.status&&(!!k.canceledAtDate||t!==k.planPeriod&&!!(r.annualMonthlyAmount>0)||!1),R=!1):(I=!0,R=!1),(0,i.BX)(m.Box,{elementDescriptor:m.descriptors.pricingTableCard,elementId:m.descriptors.pricingTableCard.setId(D),sx:e=>({display:"grid",gap:0,gridTemplateRows:"subgrid",gridRow:"span 5",background:g.common.mutedBackground(e),borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha150,borderRadius:e.radii.$xl,overflow:"hidden",textAlign:"left"}),"data-variant":x?"compact":"default",children:[(0,i.tZ)(y,{plan:r,isCompact:x,planPeriod:t,setPlanPeriod:n,badge:F?(0,i.tZ)(h.u,{subscription:k}):void 0}),(0,i.BX)(m.Box,{elementDescriptor:m.descriptors.pricingTableCardBody,sx:{display:"grid",gridTemplateRows:"subgrid",gridRow:"span 2",gap:0},children:["bottom"===S&&!w||"top"===S&&z?(0,i.tZ)(m.Box,{elementDescriptor:m.descriptors.pricingTableCardFeatures,sx:e=>({display:"flex",flexDirection:"column",flex:"1",padding:x?e.space.$3:e.space.$4,backgroundColor:z?e.colors.$colorBackground:"transparent",borderTopWidth:z?e.borderWidths.$normal:0,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha150}),"data-variant":x?"compact":"default",children:(0,i.tZ)(T,{plan:r,isCompact:x,showPlanDetails:e=>{let i=(0,d.N)(f,e);b.__internal_openPlanDetails({plan:r,initialPlanPeriod:t,portalRoot:i})}})}):null,I?(0,i.tZ)(m.Box,{elementDescriptor:m.descriptors.pricingTableCardFooter,sx:e=>({marginTop:"auto",padding:x?e.space.$3:e.space.$4,borderTopWidth:e.borderWidths.$normal,borderTopStyle:e.borderStyles.$solid,borderTopColor:e.colors.$borderAlpha150,order:"top"===S?-1:void 0}),children:R&&k?(0,i.tZ)(m.Text,{elementDescriptor:m.descriptors.pricingTableCardFooterNotice,variant:x?"buttonSmall":"buttonLarge",localizationKey:(0,m.localizationKeys)("badge__startsAt",{date:null==k?void 0:k.periodStartDate}),colorScheme:"secondary",sx:e=>({paddingBlock:e.space.$1x5,textAlign:"center"})}):(0,i.BX)(s.u.Root,{children:[(0,i.tZ)(s.u.Trigger,{sx:{width:"100%"},children:(0,i.tZ)(m.Button,{elementDescriptor:m.descriptors.pricingTableCardFooterButton,block:!0,textVariant:x?"buttonSmall":"buttonLarge",...P({plan:r,isCompact:x,selectedPlanPeriod:t}),onClick:e=>{c(r,e)}})}),B&&!Z&&(0,i.tZ)(s.u.Content,{text:(0,m.localizationKeys)("organizationProfile.plansPage.alerts.noPermissionsToManageBilling")})]})}):(0,i.tZ)(m.Box,{sx:e=>({backgroundColor:z?e.colors.$colorBackground:"transparent"})})]})]},v)}let y=o.forwardRef((e,r)=>{let{plan:t,isCompact:a,planPeriod:n,setPlanPeriod:l,badge:s}=e,{name:d,annualMonthlyAmount:p}=t,u=o.useMemo(()=>p<=0?t.amountFormatted:"annual"===n?t.annualMonthlyAmountFormatted:t.amountFormatted,[p,n,t.amountFormatted,t.annualMonthlyAmountFormatted]);return(0,i.BX)(m.Box,{ref:r,elementDescriptor:m.descriptors.pricingTableCardHeader,sx:e=>({width:"100%",padding:a?e.space.$3:e.space.$4,display:"grid",gap:e.space.$1,gridRow:"span 3",gridTemplateRows:"subgrid"}),"data-variant":a?"compact":"default",children:[(0,i.BX)(m.Box,{elementDescriptor:m.descriptors.pricingTableCardTitleContainer,children:[(0,i.BX)(m.Box,{sx:e=>({display:"flex",justifyContent:"space-between",alignItems:"flex-start",gap:e.space.$0x25}),children:[(0,i.tZ)(m.Heading,{elementDescriptor:m.descriptors.pricingTableCardTitle,as:"h2",textVariant:a?"h3":"h2",children:d}),s&&s]}),!a&&t.description?(0,i.tZ)(m.Text,{elementDescriptor:m.descriptors.pricingTableCardDescription,variant:"subtitle",colorScheme:"secondary",sx:{justifySelf:"flex-start"},children:t.description}):null]}),(0,i.BX)(m.Flex,{elementDescriptor:m.descriptors.pricingTableCardFeeContainer,"data-variant":a?"compact":"default",align:"center",wrap:"wrap",sx:e=>({columnGap:e.space.$1,marginTop:e.space.$1}),children:[(0,i.BX)(m.Text,{elementDescriptor:m.descriptors.pricingTableCardFee,variant:a?"h2":"h1",colorScheme:"body",children:[t.currencySymbol,u]}),t.isDefault?null:(0,i.tZ)(m.Text,{elementDescriptor:m.descriptors.pricingTableCardFeePeriod,variant:"caption",colorScheme:"secondary",sx:e=>({textTransform:"lowercase",":before":{content:'"/"',marginInlineEnd:e.space.$0x25}}),localizationKey:(0,m.localizationKeys)("commerce.month")})]}),p>0&&l?(0,i.tZ)(m.Box,{elementDescriptor:m.descriptors.pricingTableCardPeriodToggle,sx:e=>({marginTop:e.space.$1}),children:(0,i.tZ)(c.r,{isChecked:"annual"===n,onChange:e=>l(e?"annual":"month"),label:(0,m.localizationKeys)("commerce.billedAnnually")})}):(0,i.tZ)(m.Text,{elementDescriptor:m.descriptors.pricingTableCardFeePeriodNotice,variant:"caption",colorScheme:"secondary",localizationKey:t.isDefault?(0,m.localizationKeys)("commerce.alwaysFree"):(0,m.localizationKeys)("commerce.billedMonthlyOnly"),sx:e=>({justifySelf:"flex-start",alignSelf:"center",marginTop:e.space.$1})})]})}),T=o.forwardRef((e,r)=>{let{plan:t,isCompact:a,showPlanDetails:o}=e,n=t.features.length,l=a?n>3:n>8;return(0,i.BX)(m.Box,{ref:r,elementDescriptor:m.descriptors.pricingTableCardFeatures,sx:e=>({display:"grid",flex:1,rowGap:a?e.space.$2:e.space.$3}),children:[(0,i.tZ)(m.Col,{elementDescriptor:m.descriptors.pricingTableCardFeaturesList,"data-variant":a?"compact":"default",as:"ul",role:"list",sx:e=>({flex:"1",rowGap:a?e.space.$2:e.space.$3,margin:0,padding:0}),children:t.features.slice(0,l?a?3:8:n).map(e=>(0,i.BX)(m.Box,{elementDescriptor:m.descriptors.pricingTableCardFeaturesListItem,elementId:m.descriptors.pricingTableCardFeaturesListItem.setId(e.slug),as:"li",sx:e=>({display:"flex",alignItems:"baseline",gap:e.space.$2,margin:0,padding:0}),children:[(0,i.tZ)(m.Icon,{icon:u.Jr,colorScheme:"neutral",size:"sm","aria-hidden":!0,sx:e=>({transform:"translateY(".concat(e.space.$0x25,")")})}),(0,i.tZ)(m.Span,{elementDescriptor:m.descriptors.pricingTableCardFeaturesListItemContent,children:(0,i.tZ)(m.Text,{elementDescriptor:m.descriptors.pricingTableCardFeaturesListItemTitle,colorScheme:"body",sx:e=>({fontWeight:e.fontWeights.$normal}),children:e.name})})]},e.id))}),l&&(0,i.BX)(m.SimpleButton,{onClick:e=>o(e),variant:"link",sx:e=>({marginBlockStart:"auto",paddingBlock:e.space.$1,gap:e.space.$1}),children:[(0,i.tZ)(m.Icon,{icon:u.v3,colorScheme:"neutral",size:"md","aria-hidden":!0}),(0,i.tZ)(m.Span,{localizationKey:(0,m.localizationKeys)("commerce.seeAllFeatures")})]})]})});t(13189),t(63277),t(82230),t(27899),t(37389),t(27968),t(46299);var B=t(29629),f=t(47291),$=t(25407),C=t(12464);function S(e){let{plans:r=[],planPeriod:t,setPlanPeriod:a,onSelect:n,highlightedPlan:c}=e,s=(0,C.Tb)(),{animations:d}=(0,m.useAppearance)().parsedLayout,p=!s&&!0===d,h=o.useId(),x="".concat(h,"-segmented-control"),{buttonPropsForPlan:b}=(0,l.usePlansContext)(),{t:y}=(0,m.useLocalizations)(),T=e=>({transition:p?"grid-template-rows ".concat(e.transitionDuration.$slower," ").concat(e.transitionTiming.$slowBezier):"none"}),S=e=>({background:g.common.mergedColorsBackground($.O9.setAlpha(e.colors.$colorBackground,1),e.colors.$neutralAlpha25)}),w=o.useMemo(()=>"repeat(".concat(r.length+1,", minmax(9.375rem,1fr))"),[r.length]),v=o.useMemo(()=>r.some(e=>e.annualMonthlyAmount>0),[r]),D=o.useMemo(()=>{let e=new Set;return r.forEach(r=>{let{features:t}=r;t.forEach(r=>{let{name:t}=r;return e.add(t)})}),Array.from(e)},[r]);return r.length?(0,i.tZ)(g.InternalThemeProvider,{children:(0,i.tZ)(m.Box,{elementDescriptor:m.descriptors.pricingTableMatrix,sx:e=>({position:"relative",minWidth:"100%",display:"grid",isolation:"isolate",backgroundColor:e.colors.$colorBackground,[g.mqu.md]:{overflowX:"auto"}}),children:(0,i.BX)(m.Box,{elementDescriptor:m.descriptors.pricingTableMatrixTable,role:"table",children:[(0,i.tZ)(m.Box,{elementDescriptor:[m.descriptors.pricingTableMatrixRowGroup,m.descriptors.pricingTableMatrixRowGroupHeader],role:"rowgroup",sx:e=>({position:"sticky",top:0,backgroundColor:e.colors.$colorBackground,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100,zIndex:1}),children:(0,i.BX)(m.Box,{elementDescriptor:[m.descriptors.pricingTableMatrixRow,m.descriptors.pricingTableMatrixRowHeader],role:"row",sx:{display:"grid",gridTemplateColumns:w},children:[(0,i.tZ)(m.Box,{elementDescriptor:m.descriptors.pricingTableMatrixColumnHeader,role:"columnheader",sx:e=>({display:"flex",flexDirection:"column",alignItems:"flex-start",justifyContent:"flex-end",rowGap:e.space.$3,paddingBlockEnd:e.space.$12,paddingInlineStart:e.space.$3}),children:v?(0,i.BX)(i.HY,{children:[(0,i.tZ)(m.Text,{id:x,colorScheme:"secondary",variant:"caption",localizationKey:(0,m.localizationKeys)("commerce.pricingTable.billingCycle"),children:"Billing cycle"}),(0,i.BX)(f.s.Root,{"aria-labelledby":x,value:t,onChange:e=>a(e),children:[(0,i.tZ)(f.s.Button,{value:"month",text:(0,m.localizationKeys)("commerce.monthly")}),(0,i.tZ)(f.s.Button,{value:"annual",text:(0,m.localizationKeys)("commerce.annually")})]})]}):null}),r.map(e=>{let r=e.slug===c,a=e.annualMonthlyAmount<=0?e.amountFormatted:"annual"===t?e.annualMonthlyAmountFormatted:e.amountFormatted;return(0,i.BX)(m.Box,{elementDescriptor:m.descriptors.pricingTableMatrixColumnHeader,role:"columnheader",sx:[e=>({display:"flex",flexDirection:"column",alignItems:"flex-start",flex:1,borderStartStartRadius:e.radii.$xl,borderStartEndRadius:e.radii.$xl}),r&&S],"data-highlighted":r,children:[(0,i.BX)(m.Box,{sx:e=>({width:"100%",padding:e.space.$4}),children:[e.avatarUrl||r?(0,i.BX)(m.Span,{sx:e=>({width:"100%",display:"flex",alignItems:"flex-start",justifyContent:"space-between",marginBlockEnd:e.space.$3}),children:[e.avatarUrl?(0,i.tZ)(B.q,{elementDescriptor:m.descriptors.pricingTableMatrixAvatar,size:e=>40,title:e.name,initials:e.name[0],rounded:!1,imageUrl:e.avatarUrl}):null,r?(0,i.tZ)(m.Badge,{elementDescriptor:m.descriptors.pricingTableMatrixBadge,colorScheme:"secondary",localizationKey:(0,m.localizationKeys)("commerce.popular")}):null]}):null,(0,i.tZ)(m.Heading,{elementDescriptor:m.descriptors.pricingTableMatrixPlanName,textVariant:"h3",children:e.name}),(0,i.tZ)(m.Flex,{align:"center",wrap:"wrap",sx:e=>({marginTop:e.space.$2,columnGap:e.space.$1x5}),children:e.hasBaseFee?(0,i.BX)(i.HY,{children:[(0,i.BX)(m.Text,{elementDescriptor:m.descriptors.pricingTableMatrixFee,variant:"h2",colorScheme:"body",children:[e.currencySymbol,a]}),(0,i.tZ)(m.Text,{elementDescriptor:m.descriptors.pricingTableMatrixFeePeriod,variant:"caption",colorScheme:"secondary",sx:e=>({textTransform:"lowercase",":before":{content:'"/"',marginInlineEnd:e.space.$1}}),localizationKey:(0,m.localizationKeys)("commerce.month")}),e.annualMonthlyAmount>0?(0,i.tZ)(m.Box,{elementDescriptor:m.descriptors.pricingTableMatrixFeePeriodNotice,sx:[e=>({width:"100%",display:"grid",gridTemplateRows:"annual"===t?"1fr":"0fr"}),T],inert:"annual"!==t?"true":void 0,children:(0,i.tZ)(m.Box,{elementDescriptor:m.descriptors.pricingTableMatrixFeePeriodNoticeInner,sx:{overflow:"hidden",minHeight:0},children:(0,i.BX)(m.Text,{elementDescriptor:m.descriptors.pricingTableMatrixFeePeriodNoticeLabel,variant:"caption",colorScheme:"secondary",sx:e=>({width:"100%",display:"flex",alignItems:"center",columnGap:e.space.$1}),children:[(0,i.tZ)(m.Icon,{icon:u.I$,colorScheme:"neutral",size:"sm","aria-hidden":!0})," ",(0,i.tZ)(m.Span,{localizationKey:(0,m.localizationKeys)("commerce.billedAnnually")})]})})}):null]}):(0,i.tZ)(m.Text,{elementDescriptor:m.descriptors.pricingTableMatrixFee,variant:"h2",localizationKey:(0,m.localizationKeys)("commerce.free"),colorScheme:"body"})})]}),e.isDefault?null:(0,i.tZ)(m.Box,{sx:e=>({width:"100%",marginBlockStart:"auto",marginBlockEnd:e.space.$8,paddingBlockStart:e.space.$2,paddingBlockEnd:e.space.$4,paddingInline:e.space.$4}),children:(0,i.tZ)(m.Button,{block:!0,textVariant:"buttonSmall",size:"xs",onClick:r=>{n(e,r)},...b({plan:e,selectedPlanPeriod:t}),colorScheme:r?"primary":"secondary"})})]},e.slug)})]})}),(0,i.BX)(m.Box,{elementDescriptor:[m.descriptors.pricingTableMatrixRowGroup,m.descriptors.pricingTableMatrixRowGroupBody],role:"rowgroup",children:[D.map(e=>(0,i.BX)(m.Box,{elementDescriptor:[m.descriptors.pricingTableMatrixRow,m.descriptors.pricingTableMatrixRowBody],role:"row",sx:e=>({position:"relative",display:"grid",gridTemplateColumns:w,borderBottomWidth:e.borderWidths.$normal,borderBottomStyle:e.borderStyles.$solid,borderBottomColor:e.colors.$borderAlpha100,":after":{content:'""',position:"absolute",inset:0,pointerEvents:"none",backgroundColor:e.colors.$neutralAlpha25,opacity:0},":hover:after":{opacity:1}}),children:[(0,i.tZ)(m.Box,{elementDescriptor:m.descriptors.pricingTableMatrixCell,role:"cell",sx:e=>({padding:e.space.$3}),children:(0,i.tZ)(m.Text,{colorScheme:"body",children:e})}),r.map(r=>{let t=r.slug===c,a=r.features.some(r=>r.name===e);return(0,i.tZ)(m.Box,{elementDescriptor:m.descriptors.pricingTableMatrixCell,role:"cell",sx:[e=>({display:"grid",placeContent:"center",padding:e.space.$3}),t&&S],"data-highlighted":t,"data-checked":a,children:a&&(0,i.tZ)(m.Icon,{icon:u.Jr,colorScheme:"neutral",size:"sm","aria-label":y((0,m.localizationKeys)("commerce.pricingTable.included"))})},r.slug)})]},e)),(0,i.BX)(m.Box,{elementDescriptor:m.descriptors.pricingTableMatrixFooter,sx:{display:"grid",gridTemplateColumns:w},children:[(0,i.tZ)(m.Box,{elementDescriptor:[m.descriptors.pricingTableMatrixCell,m.descriptors.pricingTableMatrixCellFooter]}),r.map(e=>{let r=e.slug===c;return(0,i.tZ)(m.Box,{elementDescriptor:[m.descriptors.pricingTableMatrixCell,m.descriptors.pricingTableMatrixCellFooter],sx:[e=>({height:e.space.$10,borderEndStartRadius:e.radii.$xl,borderEndEndRadius:e.radii.$xl}),r&&S],"data-highlighted":r},e.slug)})]})]})]})})}):null}let w=e=>{let r=(0,a.cL)(),{mode:t="mounted",signInMode:c="redirect"}=(0,l.usePricingTableContext)(),s="modal"===t,{subscriptionItems:d}=(0,l.useSubscription)(),{data:p}=(0,l.usePlans)(),{handleSelectPlan:m}=(0,l.usePlansContext)(),u=(0,o.useMemo)(()=>{if(s){let e=null==d?void 0:d.find(e=>"upcoming"===e.status);if(e)return e.planPeriod;let r=null==d?void 0:d.find(e=>!e.canceledAtDate&&"active"===e.status&&!e.plan.isDefault);if(r)return r.planPeriod}return"annual"},[s,d]),[g,h]=(0,o.useState)(u);(0,o.useEffect)(()=>{h(u)},[u]);let b=(i,a)=>{var o;if(!r.isSignedIn)return"modal"===c?r.openSignIn():r.redirectToSignIn();m({mode:t,plan:i,planPeriod:g,event:a,appearance:null==(o=e.checkoutProps)?void 0:o.appearance,newSubscriptionRedirectUrl:e.newSubscriptionRedirectUrl})};return(0,l.usePaymentMethods)(),(0,i.tZ)(n.Z.Root,{flow:"pricingTable",sx:{width:"100%"},children:"modal"!==t&&"matrix"===e.layout?(0,i.tZ)(S,{plans:p,planPeriod:g,setPlanPeriod:h,onSelect:b,highlightedPlan:e.highlightPlan}):(0,i.tZ)(x,{plans:p,planPeriod:g,setPlanPeriod:h,onSelect:b,isCompact:s,props:e})})},v=e=>(0,i.tZ)("div",{children:(0,i.tZ)(w,{...e})}),D=e=>{let{mode:r="mounted"}=(0,l.usePricingTableContext)();return"modal"===r?(0,i.tZ)(v,{...e}):(0,i.tZ)(w,{...e})}},95746:function(e,r,t){t.d(r,{u:()=>l});var i=t(79109),a=t(64204);let o={active:"badge__activePlan",upcoming:"badge__upcomingPlan",past_due:"badge__pastDuePlan"},n={active:"secondary",upcoming:"primary",past_due:"warning"},l=e=>{let{subscription:r,elementDescriptor:t}=e;return(0,i.tZ)(a.Badge,{elementDescriptor:t,colorScheme:n[r.status],localizationKey:(0,a.localizationKeys)(o[r.status])})}}}]);