fix: allow resubscribing (#1901)

Currently users who cancel their plan are stuck without the ability to
resubscribe. This allows them to choose a plan to subscribe

This assumes that a Subscription in the "INACTIVE" state means that the
plan has been paid but canceled.

No tests have been done to determine the relation between "PAST_DUE" and
"INACTIVE" states within our context.

apps/remix/app/components/dialogs/organisation-member-invite-dialog.tsx

@@ -13,7 +13,7 @@ import { z } from 'zod';
 
 import { downloadFile } from '@documenso/lib/client-only/download-file';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
+import { IS_BILLING_ENABLED, SUPPORT_EMAIL } from '@documenso/lib/constants/app';
 import { ORGANISATION_MEMBER_ROLE_HIERARCHY } from '@documenso/lib/constants/organisations';
 import { ORGANISATION_MEMBER_ROLE_MAP } from '@documenso/lib/constants/organisations-translations';
 import { INTERNAL_CLAIM_ID } from '@documenso/lib/types/subscription';
@@ -303,8 +303,8 @@ export const OrganisationMemberInviteDialog = ({
               <AlertDescription>
                 <Trans>
                   Your plan does not support inviting members. Please upgrade or your plan or
-                  contact sales at <a href="mailto:support@documenso.com">support@documenso.com</a>{' '}
-                  if you would like to discuss your options.
+                  contact sales at <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a> if you
+                  would like to discuss your options.
                 </Trans>
               </AlertDescription>
             </Alert>

apps/remix/app/components/dialogs/team-create-dialog.tsx

@@ -12,7 +12,11 @@ import type { z } from 'zod';
 import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { IS_BILLING_ENABLED, NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
+import {
+  IS_BILLING_ENABLED,
+  NEXT_PUBLIC_WEBAPP_URL,
+  SUPPORT_EMAIL,
+} from '@documenso/lib/constants/app';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import { trpc } from '@documenso/trpc/react';
 import { ZCreateTeamRequestSchema } from '@documenso/trpc/server/team-router/create-team.types';
@@ -193,8 +197,8 @@ export const TeamCreateDialog = ({ trigger, onCreated, ...props }: TeamCreateDia
               <AlertDescription className="mt-0">
                 <Trans>
                   You have reached the maximum number of teams for your plan. Please contact sales
-                  at <a href="mailto:support@documenso.com">support@documenso.com</a> if you would
-                  like to adjust your plan.
+                  at <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a> if you would like to
+                  adjust your plan.
                 </Trans>
               </AlertDescription>
             </Alert>

apps/remix/app/components/general/organisations/organisation-billing-banner.tsx

@@ -5,18 +5,23 @@ import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
 import { SubscriptionStatus } from '@prisma/client';
 import { AlertTriangle } from 'lucide-react';
+import { Link } from 'react-router';
 import { match } from 'ts-pattern';
 
 import { useOptionalCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
+import { SUPPORT_EMAIL } from '@documenso/lib/constants/app';
 import { canExecuteOrganisationAction } from '@documenso/lib/utils/organisations';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
+import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
+  DialogClose,
   DialogContent,
   DialogDescription,
   DialogFooter,
+  DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
 import { useToast } from '@documenso/ui/primitives/use-toast';
@@ -86,7 +91,7 @@ export const OrganisationBillingBanner = () => {
             className={cn({
               'text-yellow-900 hover:bg-yellow-100 dark:hover:bg-yellow-500':
                 subscriptionStatus === SubscriptionStatus.PAST_DUE,
-              'text-destructive-foreground hover:bg-destructive-foreground hover:text-white':
+              'text-destructive-foreground hover:bg-destructive hover:text-white':
                 subscriptionStatus === SubscriptionStatus.INACTIVE,
             })}
             disabled={isPending}
@@ -99,38 +104,78 @@ export const OrganisationBillingBanner = () => {
       </div>
 
       <Dialog open={isOpen} onOpenChange={(value) => !isPending && setIsOpen(value)}>
-        <DialogContent>
-          <DialogTitle>
-            <Trans>Payment overdue</Trans>
-          </DialogTitle>
+        {match(subscriptionStatus)
+          .with(SubscriptionStatus.PAST_DUE, () => (
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>
+                  <Trans>Payment overdue</Trans>
+                </DialogTitle>
 
-          {match(subscriptionStatus)
-            .with(SubscriptionStatus.PAST_DUE, () => (
-              <DialogDescription>
-                <Trans>
-                  Your payment for teams is overdue. Please settle the payment to avoid any service
-                  disruptions.
-                </Trans>
-              </DialogDescription>
-            ))
-            .with(SubscriptionStatus.INACTIVE, () => (
-              <DialogDescription>
-                <Trans>
-                  Due to an unpaid invoice, your team has been restricted. Please settle the payment
-                  to restore full access to your team.
-                </Trans>
-              </DialogDescription>
-            ))
-            .otherwise(() => null)}
+                <DialogDescription>
+                  <Trans>
+                    Your payment is overdue. Please settle the payment to avoid any service
+                    disruptions.
+                  </Trans>
+                </DialogDescription>
+              </DialogHeader>
 
-          {canExecuteOrganisationAction('MANAGE_BILLING', organisation.currentOrganisationRole) && (
-            <DialogFooter>
-              <Button loading={isPending} onClick={async () => handleCreatePortal(organisation.id)}>
-                <Trans>Resolve payment</Trans>
-              </Button>
-            </DialogFooter>
-          )}
-        </DialogContent>
+              {canExecuteOrganisationAction(
+                'MANAGE_BILLING',
+                organisation.currentOrganisationRole,
+              ) && (
+                <DialogFooter>
+                  <Button
+                    loading={isPending}
+                    onClick={async () => handleCreatePortal(organisation.id)}
+                  >
+                    <Trans>Resolve payment</Trans>
+                  </Button>
+                </DialogFooter>
+              )}
+            </DialogContent>
+          ))
+          .with(SubscriptionStatus.INACTIVE, () => (
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>
+                  <Trans>Subscription invalid</Trans>
+                </DialogTitle>
+
+                <DialogDescription>
+                  <Trans>
+                    Your plan is no longer valid. Please subscribe to a new plan to continue using
+                    Documenso.
+                  </Trans>
+                </DialogDescription>
+              </DialogHeader>
+
+              <Alert variant="neutral">
+                <AlertDescription>
+                  <Trans>
+                    If there is any issue with your subscription, please contact us at{' '}
+                    <a href={`mailto:${SUPPORT_EMAIL}`}>{SUPPORT_EMAIL}</a>.
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+
+              {canExecuteOrganisationAction(
+                'MANAGE_BILLING',
+                organisation.currentOrganisationRole,
+              ) && (
+                <DialogFooter>
+                  <DialogClose asChild>
+                    <Button asChild>
+                      <Link to={`/o/${organisation.url}/settings/billing`}>
+                        <Trans>Manage Billing</Trans>
+                      </Link>
+                    </Button>
+                  </DialogClose>
+                </DialogFooter>
+              )}
+            </DialogContent>
+          ))
+          .otherwise(() => null)}
       </Dialog>
     </>
   );

apps/remix/app/routes/_authenticated+/o.$orgUrl.settings.billing.tsx

@@ -1,5 +1,6 @@
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
+import { SubscriptionStatus } from '@prisma/client';
 import { Loader } from 'lucide-react';
 import type Stripe from 'stripe';
 import { match } from 'ts-pattern';
@@ -134,7 +135,9 @@ export default function TeamsSettingBillingPage() {
 
       <hr className="my-4" />
 
-      {!subscription && canManageBilling && <BillingPlans plans={plans} />}
+      {(!subscription ||
+        subscription.organisationSubscription.status === SubscriptionStatus.INACTIVE) &&
+        canManageBilling && <BillingPlans plans={plans} />}
 
       <section className="mt-6">
         <OrganisationBillingInvoicesTable

apps/remix/app/routes/_unauthenticated+/articles.signature-disclosure.tsx

@@ -1,10 +1,9 @@
 import { Trans } from '@lingui/react/macro';
 import { Link } from 'react-router';
 
+import { SUPPORT_EMAIL } from '@documenso/lib/constants/app';
 import { Button } from '@documenso/ui/primitives/button';
 
-const SUPPORT_EMAIL = 'support@documenso.com';
-
 export default function SignatureDisclosure() {
   return (
     <div>

packages/lib/constants/app.ts

@@ -12,3 +12,5 @@ export const NEXT_PRIVATE_INTERNAL_WEBAPP_URL =
 export const IS_BILLING_ENABLED = () => env('NEXT_PUBLIC_FEATURE_BILLING_ENABLED') === 'true';
 
 export const API_V2_BETA_URL = '/api/v2-beta';
+
+export const SUPPORT_EMAIL = 'support@documenso.com';