🚸 (billing) Improve feedback when subscription is "past_due"

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

@@ -1,13 +1,13 @@
 import { useToast } from '@/hooks/useToast'
 import { trpc } from '@/lib/trpc'
 import { useScopedI18n } from '@/locales'
-import { Button, Link } from '@chakra-ui/react'
+import { Button, ButtonProps, Link } from '@chakra-ui/react'
 
 type Props = {
   workspaceId: string
-}
+} & Pick<ButtonProps, 'colorScheme'>
 
-export const BillingPortalButton = ({ workspaceId }: Props) => {
+export const BillingPortalButton = ({ workspaceId, colorScheme }: Props) => {
   const scopedT = useScopedI18n('billing')
   const { showToast } = useToast()
   const { data } = trpc.billing.getBillingPortalUrl.useQuery(
@@ -23,7 +23,12 @@ export const BillingPortalButton = ({ workspaceId }: Props) => {
     }
   )
   return (
-    <Button as={Link} href={data?.billingPortalUrl} isLoading={!data}>
+    <Button
+      as={Link}
+      href={data?.billingPortalUrl}
+      isLoading={!data}
+      colorScheme={colorScheme}
+    >
       {scopedT('billingPortalButton.label')}
     </Button>
   )

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

@@ -100,7 +100,11 @@ export const ChangePlanForm = ({ workspace }: Props) => {
     }
   }
 
-  if (data?.subscription?.cancelDate) return null
+  if (
+    data?.subscription?.cancelDate ||
+    data?.subscription?.status === 'past_due'
+  )
+    return null
 
   return (
     <Stack spacing={6}>

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

@@ -1,4 +1,11 @@
-import { Text, HStack, Stack, Heading } from '@chakra-ui/react'
+import {
+  Text,
+  HStack,
+  Stack,
+  Heading,
+  Alert,
+  AlertIcon,
+} from '@chakra-ui/react'
 import { Plan } from '@typebot.io/prisma'
 import React from 'react'
 import { PlanTag } from './PlanTag'
@@ -35,8 +42,21 @@ export const CurrentSubscriptionSummary = ({ workspace }: Props) => {
           </Text>
         )}
       </HStack>
+      {data?.subscription?.status === 'past_due' && (
+        <Alert fontSize="sm" status="error">
+          <AlertIcon />
+          {scopedT('pastDueAlert')}
+        </Alert>
+      )}
 
-      {isSubscribed && <BillingPortalButton workspaceId={workspace.id} />}
+      {isSubscribed && (
+        <BillingPortalButton
+          workspaceId={workspace.id}
+          colorScheme={
+            data?.subscription?.status === 'past_due' ? 'blue' : undefined
+          }
+        />
+      )}
     </Stack>
   )
 }