@clerk/clerk-js/dist/645_clerk.browser_2ed373_5.79.0.js

Clerk JS library

"use strict";(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["645"],{5515:function(e,t,r){r.r(t),r.d(t,{StatementsList:()=>d,StatementPage:()=>P});var o=r(9109),n=r(6600),i=r(9082),a=r(1576),s=r(4204),l=r(4676),c=r(5913);let d=()=>{let{data:e,isLoading:t,count:r}=(0,a.useStatements)(),i=(0,a.useSubscriberTypeLocalizationRoot)();return(0,o.tZ)(n.wQ,{page:1,onPageChange:e=>{},itemCount:r,pageCount:1,itemsPerPage:10,isLoading:t,emptyStateLocalizationKey:(0,s.localizationKeys)(`${i}.billingPage.statementsSection.empty`),headers:[(0,s.localizationKeys)(`${i}.billingPage.statementsSection.tableHeader__date`),(0,s.localizationKeys)(`${i}.billingPage.statementsSection.tableHeader__amount`)],rows:e.map(e=>(0,o.tZ)(p,{statement:e},e.id))})},p=({statement:e})=>{let{timestamp:t,id:r,totals:{grandTotal:a}}=e,{navigate:d}=(0,l.useRouter)();return(0,o.BX)(n.Uk,{onClick:()=>{d(`statement/${r}`)},children:[(0,o.BX)(s.Td,{sx:{cursor:"pointer"},children:[(0,o.tZ)(s.Text,{variant:"subtitle",children:(0,i.p)(t,"monthyear")}),(0,o.tZ)(s.Text,{colorScheme:"secondary",variant:"caption",truncate:!0,sx:e=>({marginTop:e.space.$0x5}),children:(0,c.L)(r)})]}),(0,o.tZ)(s.Td,{sx:{cursor:"pointer"},children:(0,o.BX)(s.Text,{colorScheme:"secondary",children:[a.currencySymbol,a.amountFormatted]})})]})};var m=r(3799),u=r(7901),h=r(9117),b=r(2654),y=r(8018),g=r(4174),S=r(9144),x=r(2464);function $({text:e,copyLabel:t="Copy"}){let{onCopy:r,hasCopied:n}=(0,x.VP)(e);return(0,o.tZ)(s.Button,{elementDescriptor:s.descriptors.statementCopyButton,variant:"unstyled",onClick:r,sx:e=>({color:"inherit",width:e.sizes.$4,height:e.sizes.$4,padding:0,borderRadius:e.radii.$sm,"&:focus-visible":{outline:"2px solid",outlineColor:e.colors.$colorRing}}),focusRing:!1,"aria-label":n?"Copied":t,children:(0,o.tZ)(s.Icon,{size:"sm",icon:n?g.Jr:g.CK,"aria-hidden":!0})})}let B=function({children:e}){return(0,o.tZ)(s.Box,{elementDescriptor:s.descriptors.statementRoot,as:"article",sx:e=>({borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,borderRadius:e.radii.$lg,overflow:"clip"}),children:e})},C=function({title:e,id:t,status:r}){return(0,o.BX)(s.Box,{elementDescriptor:s.descriptors.statementHeader,as:"header",sx:e=>({padding:e.space.$4,background:e.colors.$neutralAlpha25,display:"flex",justifyContent:"space-between",alignItems:"flex-start"}),children:[(0,o.BX)(s.Span,{elementDescriptor:s.descriptors.statementHeaderTitleContainer,children:[(0,o.tZ)(s.Heading,{elementDescriptor:s.descriptors.statementHeaderTitle,textVariant:"h2",localizationKey:e}),(0,o.BX)(s.Span,{sx:e=>({display:"flex",alignItems:"center",gap:e.space.$0x25,color:e.colors.$colorMutedForeground}),children:[(0,o.tZ)($,{copyLabel:"Copy statement ID",text:t}),(0,o.tZ)(s.Text,{colorScheme:"secondary",variant:"subtitle",children:(0,c.L)(t)})]})]}),(0,o.tZ)(s.Badge,{elementDescriptor:s.descriptors.statementHeaderBadge,colorScheme:"open"===r?"secondary":"primary",sx:{textTransform:"capitalize"},children:r})]})},D=function({children:e}){return(0,o.tZ)(s.Box,{elementDescriptor:s.descriptors.statementBody,children:e})},Z=function({children:e}){return(0,o.tZ)(s.Box,{elementDescriptor:s.descriptors.statementSection,as:"section",children:e})},I=function({text:e}){return(0,o.tZ)(s.Box,{elementDescriptor:s.descriptors.statementSectionHeader,sx:e=>({paddingInline:e.space.$4,paddingBlock:e.space.$1,background:e.colors.$neutralAlpha50,borderBlockWidth:e.borderWidths.$normal,borderBlockStyle:e.borderStyles.$solid,borderBlockColor:e.colors.$borderAlpha100}),children:(0,o.tZ)(s.Heading,{elementDescriptor:s.descriptors.statementSectionHeaderTitle,textVariant:"h3",as:"h2",localizationKey:e,sx:e=>({fontWeight:e.fontWeights.$medium})})})},f=function({children:e}){return(0,o.tZ)(s.Box,{elementDescriptor:s.descriptors.statementSectionContent,children:e})},k=function({children:e}){return(0,o.tZ)(s.Box,{elementDescriptor:s.descriptors.statementSectionContentItem,sx:e=>({paddingInline:e.space.$4,paddingBlock:e.space.$3,"&:not(:first-child)":{borderBlockStartWidth:e.borderWidths.$normal,borderBlockStartStyle:e.borderStyles.$solid,borderBlockStartColor:e.colors.$borderAlpha100}}),children:e})},z=function({title:e,description:t,secondaryTitle:r,secondaryDescription:n}){return(0,o.BX)(s.Box,{elementDescriptor:s.descriptors.statementSectionContentDetailsHeader,sx:e=>({marginBlockEnd:e.space.$2,display:"flex",justifyContent:"space-between"}),children:[(0,o.BX)(s.Box,{elementDescriptor:s.descriptors.statementSectionContentDetailsHeaderItem,children:[(0,o.BX)(s.Span,{sx:e=>({display:"flex",alignItems:"center",gap:e.space.$1}),children:[(0,o.tZ)(s.Icon,{elementDescriptor:s.descriptors.statementSectionContentDetailsHeaderItemIcon,icon:g.ou,colorScheme:"neutral"}),(0,o.tZ)(s.Heading,{elementDescriptor:s.descriptors.statementSectionContentDetailsHeaderTitle,as:"h3",textVariant:"h3",localizationKey:e})]}),(0,o.tZ)(s.Text,{variant:"caption",colorScheme:"secondary",elementDescriptor:s.descriptors.statementSectionContentDetailsHeaderDescription,localizationKey:t,sx:{textTransform:"lowercase"}})]}),(0,o.BX)(s.Box,{elementDescriptor:s.descriptors.statementSectionContentDetailsHeaderItem,sx:{textAlign:"right"},children:[r&&(0,o.tZ)(s.Text,{variant:"h3",elementDescriptor:s.descriptors.statementSectionContentDetailsHeaderSecondaryTitle,localizationKey:r}),n&&(0,o.tZ)(s.Text,{variant:"caption",colorScheme:"secondary",elementDescriptor:s.descriptors.statementSectionContentDetailsHeaderSecondaryDescription,localizationKey:n})]})]})},T=function({children:e}){return(0,o.tZ)(s.Box,{elementDescriptor:s.descriptors.statementSectionContentDetailsList,as:"ul",sx:e=>({margin:0,padding:0,borderWidth:e.borderWidths.$normal,borderStyle:e.borderStyles.$solid,borderColor:e.colors.$borderAlpha100,borderRadius:e.radii.$md,overflow:"hidden"}),children:e})},v=function({labelIcon:e,label:t,valueCopyable:r=!1,value:n,valueTruncated:i=!1}){return(0,o.BX)(s.Box,{elementDescriptor:s.descriptors.statementSectionContentDetailsListItem,as:"li",sx:e=>({margin:0,paddingInline:e.space.$2,paddingBlock:e.space.$1x5,display:"flex",justifyContent:"space-between",flexWrap:"wrap",columnGap:e.space.$2,rowGap:e.space.$0x5,"&:not(:first-child)":{borderBlockStartWidth:e.borderWidths.$normal,borderBlockStartStyle:e.borderStyles.$solid,borderBlockStartColor:e.colors.$borderAlpha100}}),children:[(0,o.BX)(s.Span,{elementDescriptor:s.descriptors.statementSectionContentDetailsListItemLabelContainer,sx:e=>({display:"flex",alignItems:"center",gap:e.space.$1x5}),children:[e?(0,o.tZ)(s.Icon,{icon:e,colorScheme:"neutral"}):null,(0,o.tZ)(s.Text,{variant:"caption",colorScheme:"secondary",elementDescriptor:s.descriptors.statementSectionContentDetailsListItemLabel,localizationKey:t})]}),(0,o.tZ)(s.Span,{sx:e=>({display:"flex",alignItems:"center",gap:e.space.$0x25,color:e.colors.$colorMutedForeground}),children:"string"==typeof n?(0,o.BX)(o.HY,{children:[r?(0,o.tZ)($,{copyLabel:"Copy statement ID",text:n}):null,(0,o.tZ)(s.Text,{colorScheme:"secondary",variant:"caption",elementDescriptor:s.descriptors.statementSectionContentDetailsListItemValue,children:i?(0,c.L)(n):n})]}):S.isValidElement(n)?n:(0,o.tZ)(s.Text,{elementDescriptor:s.descriptors.statementSectionContentDetailsListItemValue,colorScheme:"secondary",variant:"caption",localizationKey:n})})]})},K=function({label:e,value:t}){return(0,o.BX)(s.Box,{elementDescriptor:s.descriptors.statementFooter,as:"footer",sx:e=>({paddingInline:e.space.$4,paddingBlock:e.space.$3,background:e.colors.$neutralAlpha25,borderBlockStartWidth:e.borderWidths.$normal,borderBlockStartStyle:e.borderStyles.$solid,borderBlockStartColor:e.colors.$borderAlpha100,display:"flex",justifyContent:"space-between"}),children:[(0,o.tZ)(s.Text,{variant:"h3",localizationKey:e,elementDescriptor:s.descriptors.statementFooterLabel}),(0,o.BX)(s.Span,{elementDescriptor:s.descriptors.statementFooterValueContainer,sx:e=>({display:"flex",alignItems:"center",gap:e.space.$2x5}),children:[(0,o.tZ)(s.Text,{variant:"caption",colorScheme:"secondary",elementDescriptor:s.descriptors.statementFooterCurrency,children:"USD"}),(0,o.tZ)(s.Text,{variant:"h3",elementDescriptor:s.descriptors.statementFooterValue,children:t})]})]})},P=()=>{let{params:e,navigate:t}=(0,l.useRouter)(),r=(0,y.sC)(),{organization:n}=(0,m.o8)(),a=(0,y.xr)(),{t:c,translateError:d}=(0,s.useLocalizations)(),p=(0,m.cL)(),{data:S,isLoading:x,error:$}=(0,u.default)(e.statementId?{type:"statement",id:e.statementId,orgId:"organization"===r?n?.id:void 0}:null,()=>p.billing.getStatement({id:e.statementId,orgId:"organization"===r?n?.id:void 0}));return x?(0,o.tZ)(s.Box,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%"},children:(0,o.tZ)(s.Spinner,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:s.descriptors.spinner})}):(0,o.BX)(o.HY,{children:[(0,o.tZ)(b.h.Root,{sx:e=>({borderBlockEndWidth:e.borderWidths.$normal,borderBlockEndStyle:e.borderStyles.$solid,borderBlockEndColor:e.colors.$borderAlpha100,marginBlockEnd:e.space.$4,paddingBlockEnd:e.space.$4}),children:(0,o.tZ)(b.h.BackLink,{onClick:()=>void t("../../",{searchParams:new URLSearchParams("tab=statements")}),children:(0,o.tZ)(b.h.Title,{localizationKey:(0,s.localizationKeys)(`${a}.billingPage.statementsSection.title`),textVariant:"h2"})})}),S?(0,o.BX)(B,{children:[(0,o.tZ)(C,{title:(0,i.p)(S.timestamp,"monthyear"),id:S.id,status:S.status}),(0,o.tZ)(D,{children:S.groups.map(e=>(0,o.BX)(Z,{children:[(0,o.tZ)(I,{text:(0,i.p)(e.timestamp,"long")}),(0,o.tZ)(f,{children:e.items.map(e=>(0,o.BX)(k,{children:[(0,o.tZ)(z,{title:e.subscriptionItem.plan.name,description:`${e.subscriptionItem.amount?.currencySymbol}${e.subscriptionItem.amount?.amountFormatted} / ${"month"===e.subscriptionItem.planPeriod?c((0,s.localizationKeys)("commerce.month")):c((0,s.localizationKeys)("commerce.year"))}`,secondaryTitle:`${e.amount.currencySymbol}${e.amount.amountFormatted}`}),(0,o.BX)(T,{children:[(0,o.tZ)(v,{label:"recurring"===e.chargeType?(0,s.localizationKeys)(`${a}.billingPage.statementsSection.itemCaption__paidForPlan`,{plan:e.subscriptionItem.plan.name,period:e.subscriptionItem.planPeriod}):(0,s.localizationKeys)(`${a}.billingPage.statementsSection.itemCaption__subscribedAndPaidForPlan`,{plan:e.subscriptionItem.plan.name,period:e.subscriptionItem.planPeriod}),labelIcon:"recurring"===e.chargeType?g.uR:g.v3,value:(0,o.BX)(s.SimpleButton,{onClick:()=>void t(`../../payment-attempt/${e.id}`),variant:"link",colorScheme:"primary",textVariant:"buttonSmall",sx:e=>({gap:e.space.$1}),children:[(0,o.tZ)(s.Span,{localizationKey:(0,s.localizationKeys)("commerce.viewPayment")}),(0,o.tZ)(s.Icon,{icon:g.LZ,size:"sm","aria-hidden":!0})]})}),e.subscriptionItem.credit&&e.subscriptionItem.credit.amount.amount>0?(0,o.tZ)(v,{label:(0,s.localizationKeys)(`${a}.billingPage.statementsSection.itemCaption__proratedCredit`),value:`(${e.subscriptionItem.credit.amount.currencySymbol}${e.subscriptionItem.credit.amount.amountFormatted})`}):null]})]},e.id))})]},e.timestamp.toISOString()))}),(0,o.tZ)(K,{label:(0,s.localizationKeys)(`${a}.billingPage.statementsSection.totalPaid`),value:`${S.totals.grandTotal.currencySymbol}${S.totals.grandTotal.amountFormatted}`})]}):(0,o.tZ)(s.Box,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%"},children:(0,o.tZ)(h.b,{variant:"danger",colorScheme:"danger",children:$?d($.errors[0]):c((0,s.localizationKeys)(`${a}.billingPage.statementsSection.notFound`))})})]})}}}]);