🐛 (billing) Fix crash when having a draft invoice

apps/builder/src/features/billing/components/BillingContent/BillingContent.tsx

@@ -16,7 +16,7 @@ export const BillingContent = () => {
   return (
     <Stack spacing="10" w="full">
       <UsageContent workspace={workspace} />
-      <Stack spacing="2">
+      <Stack spacing="4">
         <CurrentSubscriptionContent
           plan={workspace.plan}
           stripeId={workspace.stripeId}

apps/builder/src/features/billing/components/BillingContent/InvoicesList.tsx

@@ -18,6 +18,7 @@ import { Workspace } from 'db'
 import Link from 'next/link'
 import React from 'react'
 import { useInvoicesQuery } from './queries/useInvoicesQuery'
+import { isDefined } from 'utils'
 
 type Props = {
   workspace: Workspace
@@ -44,15 +45,20 @@ export const InvoicesList = ({ workspace }: Props) => {
               </Tr>
             </Thead>
             <Tbody>
-              {invoices?.map((invoice) => (
+              {invoices
+                ?.filter((invoice) => isDefined(invoice.url))
+                .map((invoice) => (
                   <Tr key={invoice.id}>
                     <Td>
                       <FileIcon />
                     </Td>
                     <Td>{invoice.id}</Td>
                     <Td>{new Date(invoice.date * 1000).toDateString()}</Td>
-                  <Td>{getFormattedPrice(invoice.amount, invoice.currency)}</Td>
                     <Td>
+                      {getFormattedPrice(invoice.amount, invoice.currency)}
+                    </Td>
+                    <Td>
+                      {invoice.url && (
                         <IconButton
                           as={Link}
                           size="xs"
@@ -62,6 +68,7 @@ export const InvoicesList = ({ workspace }: Props) => {
                           target="_blank"
                           aria-label={'Download invoice'}
                         />
+                      )}
                     </Td>
                   </Tr>
                 ))}

apps/builder/src/features/billing/components/BillingContent/queries/useInvoicesQuery.ts

@@ -4,7 +4,7 @@ import { env } from 'utils'
 
 type Invoice = {
   id: string
-  url: string
+  url: string | null
   date: number
   currency: string
   amount: number