Revert "feat: billing system overhaul (#751)"

Author: BlankParticle

apps/platform/trpc/routers/orgRouter/setup/billingRouter.ts

@@ -30,22 +30,34 @@ export const billingRouter = router({
           and(eq(orgMembers.orgId, orgId), eq(orgMembers.status, 'active'))
         );
 
-      const dates = orgBillingQuery
-        ? await billingTrpcClient.stripe.subscriptions.getSubscriptionDates.query(
-            {
-              orgId
-            }
-          )
-        : null;
-
       return {
         totalUsers: activeOrgMembersCount[0]?.count,
         currentPlan: orgPlan,
-        currentPeriod: orgPeriod,
-        dates
+        currentPeriod: orgPeriod
+      };
+    }),
+  getOrgStripePortalLink: eeProcedure
+    .unstable_concat(orgAdminProcedure)
+    .query(async ({ ctx }) => {
+      const { org } = ctx;
+      const orgId = org.id;
+
+      const orgPortalLink =
+        await billingTrpcClient.stripe.links.getPortalLink.query({
+          orgId: orgId
+        });
+
+      if (!orgPortalLink.link) {
+        throw new TRPCError({
+          code: 'FORBIDDEN',
+          message: 'Org not subscribed to a plan'
+        });
+      }
+      return {
+        portalLink: orgPortalLink.link
       };
     }),
-  createCheckoutSession: eeProcedure
+  getOrgSubscriptionPaymentLink: eeProcedure
     .unstable_concat(orgAdminProcedure)
     .input(
       z.object({
@@ -64,7 +76,6 @@ export const billingRouter = router({
           id: true
         }
       });
-
       if (orgSubscriptionQuery?.id) {
         throw new TRPCError({
           code: 'FORBIDDEN',
@@ -82,38 +93,24 @@ export const billingRouter = router({
       const activeOrgMembersCount = Number(
         activeOrgMembersCountResponse[0]?.count ?? '0'
       );
-      const checkoutSession =
-        await billingTrpcClient.stripe.links.createCheckoutSession.mutate({
-          orgId: orgId,
-          plan: plan,
-          period: period,
-          totalOrgUsers: activeOrgMembersCount
-        });
-
-      return {
-        checkoutSessionId: checkoutSession.id,
-        checkoutSessionClientSecret: checkoutSession.clientSecret
-      };
-    }),
-  getOrgStripePortalLink: eeProcedure
-    .unstable_concat(orgAdminProcedure)
-    .mutation(async ({ ctx }) => {
-      const { org } = ctx;
-      const orgId = org.id;
-
-      const orgPortalLink =
-        await billingTrpcClient.stripe.links.getPortalLink.query({
-          orgId: orgId
-        });
+      const orgSubLink =
+        await billingTrpcClient.stripe.links.createSubscriptionPaymentLink.mutate(
+          {
+            orgId: orgId,
+            plan: plan,
+            period: period,
+            totalOrgUsers: activeOrgMembersCount
+          }
+        );
 
-      if (!orgPortalLink.link) {
+      if (!orgSubLink.link) {
         throw new TRPCError({
           code: 'FORBIDDEN',
           message: 'Org not subscribed to a plan'
         });
       }
       return {
-        portalLink: orgPortalLink.link
+        subLink: orgSubLink.link
       };
     }),
   isPro: eeProcedure.query(async ({ ctx }) => {

apps/platform/trpc/routers/userRouter/securityRouter.ts

@@ -1230,7 +1230,6 @@ export const securityRouter = router({
 
       await Promise.allSettled(
         orgIdsArray.map(async (orgId) => {
-          // Update org user count
           await refreshOrgShortcodeCache(orgId);
         })
       );
@@ -1243,16 +1242,6 @@ export const securityRouter = router({
           status: 'removed'
         })
         .where(inArray(orgMembers.id, orgMemberIdsArray));
-
-      if (!ctx.selfHosted) {
-        await Promise.allSettled(
-          orgIdsArray.map(async (orgId) => {
-            await billingTrpcClient.stripe.subscriptions.updateOrgUserCount.mutate(
-              { orgId }
-            );
-          })
-        );
-      }
     }
 
     // delete orgs
@@ -1395,7 +1384,7 @@ export const securityRouter = router({
 
       // Delete Billing
 
-      if (!ctx.selfHosted) {
+      if (env.EE_LICENSE_KEY) {
         await Promise.all(
           orgIdsArray.map(async (orgId) => {
             await billingTrpcClient.stripe.subscriptions.cancelOrgSubscription.mutate(

apps/web/package.json

@@ -40,8 +40,6 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@simplewebauthn/browser": "^10.0.0",
-    "@stripe/react-stripe-js": "^2.8.0",
-    "@stripe/stripe-js": "^4.3.0",
     "@t3-oss/env-core": "^0.11.0",
     "@tailwindcss/typography": "^0.5.14",
     "@tanstack/react-query": "^5.52.1",

apps/web/src/app/[orgShortcode]/settings/org/setup/billing/_components/plans-table.tsx

@@ -1,5 +1,12 @@
 'use client';
-
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/src/components/shadcn-ui/alert-dialog';
 import {
   Card,
   CardContent,
@@ -8,29 +15,14 @@ import {
   CardHeader,
   CardTitle
 } from '@/src/components/shadcn-ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle
-} from '@/src/components/shadcn-ui/dialog';
-import {
-  EmbeddedCheckoutProvider,
-  EmbeddedCheckout
-} from '@stripe/react-stripe-js';
-import {
-  loadStripe,
-  type StripeEmbeddedCheckoutOptions
-} from '@stripe/stripe-js';
 import { Tabs, TabsList, TabsTrigger } from '@/src/components/shadcn-ui/tabs';
 import { Button } from '@/src/components/shadcn-ui/button';
+import { Check, SpinnerGap } from '@phosphor-icons/react';
 import { useOrgShortcode } from '@/src/hooks/use-params';
-import { useCallback, useRef, useState } from 'react';
-import { Check } from '@phosphor-icons/react';
+import { useEffect, useState } from 'react';
 import { platform } from '@/src/lib/trpc';
 import { cn } from '@/src/lib/utils';
-import { env } from '@/src/env';
+import { ms } from '@u22n/utils/ms';
 
 type PricingSwitchProps = {
   onSwitch: (value: string) => void;
@@ -302,60 +294,104 @@ type StripeModalProps = {
 };
 
 function StripeModal({ open, isYearly, plan, setOpen }: StripeModalProps) {
-  if (!env.NEXT_PUBLIC_BILLING_STRIPE_PUBLISHABLE_KEY) {
-    throw new Error(
-      'Stripe publishable key not set, cannot render Stripe modal'
-    );
-  }
   const orgShortcode = useOrgShortcode();
   const utils = platform.useUtils();
-  const stripePromise = useRef(
-    loadStripe(env.NEXT_PUBLIC_BILLING_STRIPE_PUBLISHABLE_KEY)
-  );
 
-  const fetchClientSecret = useCallback(
-    () =>
-      utils.org.setup.billing.createCheckoutSession
-        .fetch({
-          orgShortcode,
-          plan,
-          period: isYearly ? 'yearly' : 'monthly'
-        })
-        .then((res) => res.checkoutSessionClientSecret),
-    [
-      isYearly,
+  const {
+    data: paymentLink,
+    isLoading: paymentLinkLoading,
+    error: paymentLinkError
+  } = platform.org.setup.billing.getOrgSubscriptionPaymentLink.useQuery(
+    {
       orgShortcode,
       plan,
-      utils.org.setup.billing.createCheckoutSession
-    ]
+      period: isYearly ? 'yearly' : 'monthly'
+    },
+    {
+      enabled: open
+    }
   );
-  const onComplete = useCallback(() => {
-    setOpen(false);
-    setTimeout(() => void utils.org.setup.billing.invalidate(), 1000);
-  }, [setOpen, utils.org.setup.billing]);
 
-  const options = {
-    fetchClientSecret,
-    onComplete
-  } satisfies StripeEmbeddedCheckoutOptions;
+  const { data: overview } =
+    platform.org.setup.billing.getOrgBillingOverview.useQuery(
+      { orgShortcode },
+      {
+        enabled: open && paymentLink && !paymentLinkLoading,
+        refetchOnWindowFocus: true,
+        refetchInterval: ms('15 seconds')
+      }
+    );
+
+  // Open payment link once payment link is generated
+  useEffect(() => {
+    if (!open || paymentLinkLoading || !paymentLink) return;
+    window.open(paymentLink.subLink, '_blank');
+  }, [open, paymentLink, paymentLinkLoading]);
+
+  // handle payment info update
+  useEffect(() => {
+    if (overview?.currentPlan === 'pro') {
+      void utils.org.setup.billing.getOrgBillingOverview.invalidate({
+        orgShortcode
+      });
+      setOpen(false);
+    }
+  }, [
+    orgShortcode,
+    overview,
+    setOpen,
+    utils.org.setup.billing.getOrgBillingOverview
+  ]);
 
   return (
-    <Dialog
-      open={open}
-      onOpenChange={setOpen}>
-      <DialogContent className="w-[90vw] max-w-screen-lg p-0">
-        <DialogHeader className="sr-only">
-          <DialogTitle>Stripe Checkout</DialogTitle>
-          <DialogDescription>Checkout with Stripe</DialogDescription>
-        </DialogHeader>
-        {open && (
-          <EmbeddedCheckoutProvider
-            options={options}
-            stripe={stripePromise.current}>
-            <EmbeddedCheckout className="*:rounded-lg" />
-          </EmbeddedCheckoutProvider>
-        )}
-      </DialogContent>
-    </Dialog>
+    <AlertDialog open={open}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Upgrade to Pro</AlertDialogTitle>
+          <AlertDialogDescription className="space-y-2 p-2">
+            {paymentLinkLoading ? (
+              <span className="flex items-center gap-2">
+                <SpinnerGap className="size-4 animate-spin" />
+                Generating Payment Link
+              </span>
+            ) : paymentLink ? (
+              'Waiting for Payment (This may take a few seconds)'
+            ) : (
+              <span className="text-red-9">{paymentLinkError?.message}</span>
+            )}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <div className="flex flex-col gap-2 p-2">
+          <span>
+            We are waiting for your payment to be processed. It may take a few
+            seconds for the payment to reflect in app.
+          </span>
+          {paymentLink && (
+            <span>
+              If a new tab was not opened,{' '}
+              <a
+                target="_blank"
+                href={paymentLink.subLink}
+                className="underline">
+                open it manually.
+              </a>
+            </span>
+          )}
+          <span>
+            {`If your payment hasn't been detected correctly, please try refreshing
+            the page.`}
+          </span>
+          <span>If the issue persists, please contact support.</span>
+        </div>
+
+        <AlertDialogFooter>
+          <Button
+            onClick={() => setOpen(false)}
+            className="w-full">
+            Close
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 }