@clerk/clerk-js
Version:
Clerk JS library
1 lines • 11.9 kB
JavaScript
;(globalThis.webpackChunk_clerk_clerk_js=globalThis.webpackChunk_clerk_clerk_js||[]).push([["645"],{15515:function(e,t,o){o.r(t),o.d(t,{StatementsList:()=>d,StatementPage:()=>P});var r=o(79109),n=o(16600),i=o(39082),a=o(11576),l=o(64204),c=o(24676),s=o(55913);let d=()=>{let{data:e,isLoading:t,count:o}=(0,a.useStatements)(),i=(0,a.useSubscriberTypeLocalizationRoot)();return(0,r.tZ)(n.wQ,{page:1,onPageChange:e=>{},itemCount:o,pageCount:1,itemsPerPage:10,isLoading:t,emptyStateLocalizationKey:(0,l.localizationKeys)("".concat(i,".billingPage.statementsSection.empty")),headers:[(0,l.localizationKeys)("".concat(i,".billingPage.statementsSection.tableHeader__date")),(0,l.localizationKeys)("".concat(i,".billingPage.statementsSection.tableHeader__amount"))],rows:e.map(e=>(0,r.tZ)(p,{statement:e},e.id))})},p=e=>{let{statement:t}=e,{timestamp:o,id:a,totals:{grandTotal:d}}=t,{navigate:p}=(0,c.useRouter)();return(0,r.BX)(n.Uk,{onClick:()=>{p("statement/".concat(a))},children:[(0,r.BX)(l.Td,{sx:{cursor:"pointer"},children:[(0,r.tZ)(l.Text,{variant:"subtitle",children:(0,i.p)(o,"monthyear")}),(0,r.tZ)(l.Text,{colorScheme:"secondary",variant:"caption",truncate:!0,sx:e=>({marginTop:e.space.$0x5}),children:(0,s.L)(a)})]}),(0,r.tZ)(l.Td,{sx:{cursor:"pointer"},children:(0,r.BX)(l.Text,{colorScheme:"secondary",children:[d.currencySymbol,d.amountFormatted]})})]})};o(45261),o(70957),o(24551),o(22349),o(65223);var m=o(83799),u=o(7901),h=o(9117),b=o(92654),y=o(18018),g=o(96519),S=o(69144),x=o(12464);function B(e){let{text:t,copyLabel:o="Copy"}=e,{onCopy:n,hasCopied:i}=(0,x.VP)(t);return(0,r.tZ)(l.Button,{elementDescriptor:l.descriptors.statementCopyButton,variant:"unstyled",onClick:n,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":i?"Copied":o,children:(0,r.tZ)(l.Icon,{size:"sm",icon:i?g.Jr:g.CK,"aria-hidden":!0})})}let C=function(e){let{children:t}=e;return(0,r.tZ)(l.Box,{elementDescriptor:l.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:t})},$=function(e){let{title:t,id:o,status:n}=e;return(0,r.BX)(l.Box,{elementDescriptor:l.descriptors.statementHeader,as:"header",sx:e=>({padding:e.space.$4,background:e.colors.$neutralAlpha25,display:"flex",justifyContent:"space-between",alignItems:"flex-start"}),children:[(0,r.BX)(l.Span,{elementDescriptor:l.descriptors.statementHeaderTitleContainer,children:[(0,r.tZ)(l.Heading,{elementDescriptor:l.descriptors.statementHeaderTitle,textVariant:"h2",localizationKey:t}),(0,r.BX)(l.Span,{sx:e=>({display:"flex",alignItems:"center",gap:e.space.$0x25,color:e.colors.$colorMutedForeground}),children:[(0,r.tZ)(B,{copyLabel:"Copy statement ID",text:o}),(0,r.tZ)(l.Text,{colorScheme:"secondary",variant:"subtitle",children:(0,s.L)(o)})]})]}),(0,r.tZ)(l.Badge,{elementDescriptor:l.descriptors.statementHeaderBadge,colorScheme:"open"===n?"secondary":"primary",sx:{textTransform:"capitalize"},children:n})]})},D=function(e){let{children:t}=e;return(0,r.tZ)(l.Box,{elementDescriptor:l.descriptors.statementBody,children:t})},Z=function(e){let{children:t}=e;return(0,r.tZ)(l.Box,{elementDescriptor:l.descriptors.statementSection,as:"section",children:t})},I=function(e){let{text:t}=e;return(0,r.tZ)(l.Box,{elementDescriptor:l.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,r.tZ)(l.Heading,{elementDescriptor:l.descriptors.statementSectionHeaderTitle,textVariant:"h3",as:"h2",localizationKey:t,sx:e=>({fontWeight:e.fontWeights.$medium})})})},f=function(e){let{children:t}=e;return(0,r.tZ)(l.Box,{elementDescriptor:l.descriptors.statementSectionContent,children:t})},k=function(e){let{children:t}=e;return(0,r.tZ)(l.Box,{elementDescriptor:l.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:t})},v=function(e){let{title:t,description:o,secondaryTitle:n,secondaryDescription:i}=e;return(0,r.BX)(l.Box,{elementDescriptor:l.descriptors.statementSectionContentDetailsHeader,sx:e=>({marginBlockEnd:e.space.$2,display:"flex",justifyContent:"space-between"}),children:[(0,r.BX)(l.Box,{elementDescriptor:l.descriptors.statementSectionContentDetailsHeaderItem,children:[(0,r.BX)(l.Span,{sx:e=>({display:"flex",alignItems:"center",gap:e.space.$1}),children:[(0,r.tZ)(l.Icon,{elementDescriptor:l.descriptors.statementSectionContentDetailsHeaderItemIcon,icon:g.ou,colorScheme:"neutral"}),(0,r.tZ)(l.Heading,{elementDescriptor:l.descriptors.statementSectionContentDetailsHeaderTitle,as:"h3",textVariant:"h3",localizationKey:t})]}),(0,r.tZ)(l.Text,{variant:"caption",colorScheme:"secondary",elementDescriptor:l.descriptors.statementSectionContentDetailsHeaderDescription,localizationKey:o,sx:{textTransform:"lowercase"}})]}),(0,r.BX)(l.Box,{elementDescriptor:l.descriptors.statementSectionContentDetailsHeaderItem,sx:{textAlign:"right"},children:[n&&(0,r.tZ)(l.Text,{variant:"h3",elementDescriptor:l.descriptors.statementSectionContentDetailsHeaderSecondaryTitle,localizationKey:n}),i&&(0,r.tZ)(l.Text,{variant:"caption",colorScheme:"secondary",elementDescriptor:l.descriptors.statementSectionContentDetailsHeaderSecondaryDescription,localizationKey:i})]})]})},z=function(e){let{children:t}=e;return(0,r.tZ)(l.Box,{elementDescriptor:l.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:t})},T=function(e){let{labelIcon:t,label:o,valueCopyable:n=!1,value:i,valueTruncated:a=!1}=e;return(0,r.BX)(l.Box,{elementDescriptor:l.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,r.BX)(l.Span,{elementDescriptor:l.descriptors.statementSectionContentDetailsListItemLabelContainer,sx:e=>({display:"flex",alignItems:"center",gap:e.space.$1x5}),children:[t?(0,r.tZ)(l.Icon,{icon:t,colorScheme:"neutral"}):null,(0,r.tZ)(l.Text,{variant:"caption",colorScheme:"secondary",elementDescriptor:l.descriptors.statementSectionContentDetailsListItemLabel,localizationKey:o})]}),(0,r.tZ)(l.Span,{sx:e=>({display:"flex",alignItems:"center",gap:e.space.$0x25,color:e.colors.$colorMutedForeground}),children:"string"==typeof i?(0,r.BX)(r.HY,{children:[n?(0,r.tZ)(B,{copyLabel:"Copy statement ID",text:i}):null,(0,r.tZ)(l.Text,{colorScheme:"secondary",variant:"caption",elementDescriptor:l.descriptors.statementSectionContentDetailsListItemValue,children:a?(0,s.L)(i):i})]}):S.isValidElement(i)?i:(0,r.tZ)(l.Text,{elementDescriptor:l.descriptors.statementSectionContentDetailsListItemValue,colorScheme:"secondary",variant:"caption",localizationKey:i})})]})},K=function(e){let{label:t,value:o}=e;return(0,r.BX)(l.Box,{elementDescriptor:l.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,r.tZ)(l.Text,{variant:"h3",localizationKey:t,elementDescriptor:l.descriptors.statementFooterLabel}),(0,r.BX)(l.Span,{elementDescriptor:l.descriptors.statementFooterValueContainer,sx:e=>({display:"flex",alignItems:"center",gap:e.space.$2x5}),children:[(0,r.tZ)(l.Text,{variant:"caption",colorScheme:"secondary",elementDescriptor:l.descriptors.statementFooterCurrency,children:"USD"}),(0,r.tZ)(l.Text,{variant:"h3",elementDescriptor:l.descriptors.statementFooterValue,children:o})]})]})},P=()=>{let{params:e,navigate:t}=(0,c.useRouter)(),o=(0,y.sC)(),{organization:n}=(0,m.o8)(),a=(0,y.xr)(),{t:s,translateError:d}=(0,l.useLocalizations)(),p=(0,m.cL)(),{data:S,isLoading:x,error:B}=(0,u.default)(e.statementId?{type:"statement",id:e.statementId,orgId:"organization"===o?null==n?void 0:n.id:void 0}:null,()=>p.billing.getStatement({id:e.statementId,orgId:"organization"===o?null==n?void 0:n.id:void 0}));return x?(0,r.tZ)(l.Box,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%"},children:(0,r.tZ)(l.Spinner,{colorScheme:"primary",sx:{margin:"auto",display:"block"},elementDescriptor:l.descriptors.spinner})}):(0,r.BX)(r.HY,{children:[(0,r.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,r.tZ)(b.h.BackLink,{onClick:()=>void t("../../",{searchParams:new URLSearchParams("tab=statements")}),children:(0,r.tZ)(b.h.Title,{localizationKey:(0,l.localizationKeys)("".concat(a,".billingPage.statementsSection.title")),textVariant:"h2"})})}),S?(0,r.BX)(C,{children:[(0,r.tZ)($,{title:(0,i.p)(S.timestamp,"monthyear"),id:S.id,status:S.status}),(0,r.tZ)(D,{children:S.groups.map(e=>(0,r.BX)(Z,{children:[(0,r.tZ)(I,{text:(0,i.p)(e.timestamp,"long")}),(0,r.tZ)(f,{children:e.items.map(e=>{var o,n;return(0,r.BX)(k,{children:[(0,r.tZ)(v,{title:e.subscriptionItem.plan.name,description:"".concat(null==(o=e.subscriptionItem.amount)?void 0:o.currencySymbol).concat(null==(n=e.subscriptionItem.amount)?void 0:n.amountFormatted," / ").concat("month"===e.subscriptionItem.planPeriod?s((0,l.localizationKeys)("commerce.month")):s((0,l.localizationKeys)("commerce.year"))),secondaryTitle:"".concat(e.amount.currencySymbol).concat(e.amount.amountFormatted)}),(0,r.BX)(z,{children:[(0,r.tZ)(T,{label:"recurring"===e.chargeType?(0,l.localizationKeys)("".concat(a,".billingPage.statementsSection.itemCaption__paidForPlan"),{plan:e.subscriptionItem.plan.name,period:e.subscriptionItem.planPeriod}):(0,l.localizationKeys)("".concat(a,".billingPage.statementsSection.itemCaption__subscribedAndPaidForPlan"),{plan:e.subscriptionItem.plan.name,period:e.subscriptionItem.planPeriod}),labelIcon:"recurring"===e.chargeType?g.uR:g.v3,value:(0,r.BX)(l.SimpleButton,{onClick:()=>void t("../../payment-attempt/".concat(e.id)),variant:"link",colorScheme:"primary",textVariant:"buttonSmall",sx:e=>({gap:e.space.$1}),children:[(0,r.tZ)(l.Span,{localizationKey:(0,l.localizationKeys)("commerce.viewPayment")}),(0,r.tZ)(l.Icon,{icon:g.LZ,size:"sm","aria-hidden":!0})]})}),e.subscriptionItem.credit&&e.subscriptionItem.credit.amount.amount>0?(0,r.tZ)(T,{label:(0,l.localizationKeys)("".concat(a,".billingPage.statementsSection.itemCaption__proratedCredit")),value:"(".concat(e.subscriptionItem.credit.amount.currencySymbol).concat(e.subscriptionItem.credit.amount.amountFormatted,")")}):null]})]},e.id)})})]},e.timestamp.toISOString()))}),(0,r.tZ)(K,{label:(0,l.localizationKeys)("".concat(a,".billingPage.statementsSection.totalPaid")),value:"".concat(S.totals.grandTotal.currencySymbol).concat(S.totals.grandTotal.amountFormatted)})]}):(0,r.tZ)(l.Box,{sx:{display:"flex",justifyContent:"center",alignItems:"center",height:"100%"},children:(0,r.tZ)(h.b,{variant:"danger",colorScheme:"danger",children:B?d(B.errors[0]):s((0,l.localizationKeys)("".concat(a,".billingPage.statementsSection.notFound")))})})]})}}}]);