🚸 Add confirm dialog before plan upgrade with existing customer

Author: baptisteArno

apps/builder/src/features/billing/api/getSubscriptionPreview.ts

@@ -0,0 +1,33 @@
+import { getSubscriptionPreview as getSubscriptionPreviewHandler } from "@typebot.io/billing/api/getSubscriptionPreview";
+import { Plan } from "@typebot.io/prisma/enum";
+import { z } from "@typebot.io/zod";
+import { authenticatedProcedure } from "@/helpers/server/trpc";
+
+export const getSubscriptionPreview = authenticatedProcedure
+  .meta({
+    openapi: {
+      method: "GET",
+      path: "/v1/billing/subscription/preview",
+      protect: true,
+      summary: "Get subscription upgrade preview",
+      tags: ["Billing"],
+    },
+  })
+  .input(
+    z.object({
+      workspaceId: z.string(),
+      plan: z.enum([Plan.STARTER, Plan.PRO]),
+    }),
+  )
+  .output(
+    z.object({
+      amountDue: z.number(),
+      currency: z.enum(["usd", "eur"]),
+    }),
+  )
+  .query(async ({ input, ctx: { user } }) =>
+    getSubscriptionPreviewHandler({
+      ...input,
+      user,
+    }),
+  );

apps/builder/src/features/billing/api/router.ts

@@ -3,6 +3,7 @@ import { createCheckoutSession } from "./createCheckoutSession";
 import { createCustomCheckoutSession } from "./createCustomCheckoutSession";
 import { getBillingPortalUrl } from "./getBillingPortalUrl";
 import { getSubscription } from "./getSubscription";
+import { getSubscriptionPreview } from "./getSubscriptionPreview";
 import { getUsage } from "./getUsage";
 import { listInvoices } from "./listInvoices";
 import { updateSubscription } from "./updateSubscription";
@@ -13,6 +14,7 @@ export const billingRouter = router({
   createCheckoutSession,
   updateSubscription,
   getSubscription,
+  getSubscriptionPreview,
   getUsage,
   createCustomCheckoutSession,
 });

apps/builder/src/features/billing/api/updateSubscription.ts

@@ -22,10 +22,21 @@ export const updateSubscription = authenticatedProcedure
     }),
   )
   .output(
-    z.object({
-      workspace: workspaceSchema.nullish(),
-      checkoutUrl: z.string().nullish(),
-    }),
+    z.discriminatedUnion("type", [
+      z.object({
+        type: z.literal("success"),
+        workspace: workspaceSchema,
+      }),
+      z.object({
+        type: z.literal("error"),
+        title: z.string(),
+        description: z.string().nullish(),
+      }),
+      z.object({
+        type: z.literal("checkoutUrl"),
+        checkoutUrl: z.string(),
+      }),
+    ]),
   )
   .mutation(async ({ input, ctx: { user } }) =>
     updateSubscriptionHandler({

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

@@ -13,6 +13,7 @@ import type { PreCheckoutDialogProps } from "./PreCheckoutDialog";
 import { PreCheckoutDialog } from "./PreCheckoutDialog";
 import { ProPlanPricingCard } from "./ProPlanPricingCard";
 import { StarterPlanPricingCard } from "./StarterPlanPricingCard";
+import { UpgradeConfirmationDialog } from "./UpgradeConfirmationDialog";
 
 type Props = {
   workspace: WorkspaceInApp;
@@ -30,15 +31,24 @@ export const ChangePlanForm = ({
   const { user } = useUser();
   const [preCheckoutPlan, setPreCheckoutPlan] =
     useState<PreCheckoutDialogProps["selectedSubscription"]>();
+  const [pendingUpgrade, setPendingUpgrade] = useState<"STARTER" | "PRO">();
 
   const { data, refetch } = useSubscriptionQuery(workspace.id);
 
-  const { mutate: updateSubscription, status: updateSubscriptionStatus } =
+  const { mutateAsync: updateSubscription, status: updateSubscriptionStatus } =
     useMutation(
       trpc.billing.updateSubscription.mutationOptions({
-        onSuccess: ({ workspace, checkoutUrl }) => {
-          if (checkoutUrl) {
-            window.location.href = checkoutUrl;
+        onSuccess: (data) => {
+          if (data.type === "checkoutUrl") {
+            window.location.href = data.checkoutUrl;
+            return;
+          }
+          if (data.type === "error") {
+            toast({
+              type: "error",
+              title: data.title,
+              description: data.description ?? undefined,
+            });
             return;
           }
           refetch();
@@ -50,7 +60,7 @@ export const ChangePlanForm = ({
           toast({
             type: "success",
             description: t("billing.updateSuccessToast.description", {
-              plan: workspace?.plan,
+              plan: pendingUpgrade,
             }),
           });
         },
@@ -65,15 +75,29 @@ export const ChangePlanForm = ({
       workspaceId: workspace.id,
     } as const;
     if (workspace.stripeId) {
-      updateSubscription({
-        ...newSubscription,
-        returnUrl: window.location.href,
-      });
+      const isUpgrade = isUpgradingPlan(workspace.plan, plan);
+      if (isUpgrade) {
+        setPendingUpgrade(plan);
+      } else {
+        updateSubscription({
+          ...newSubscription,
+          returnUrl: window.location.href,
+        });
+      }
     } else {
       setPreCheckoutPlan(newSubscription);
     }
   };
 
+  const handleConfirmUpgrade = async () => {
+    if (!pendingUpgrade) return;
+    await updateSubscription({
+      plan: pendingUpgrade,
+      workspaceId: workspace.id,
+      returnUrl: window.location.href,
+    });
+  };
+
   if (
     data?.subscription?.cancelDate ||
     data?.subscription?.status === "past_due"
@@ -113,9 +137,16 @@ export const ChangePlanForm = ({
           onClose={() => setPreCheckoutPlan(undefined)}
         />
       )}
+      <UpgradeConfirmationDialog
+        isOpen={!!pendingUpgrade}
+        workspaceId={workspace.id}
+        targetPlan={pendingUpgrade}
+        onConfirm={handleConfirmUpgrade}
+        onClose={() => setPendingUpgrade(undefined)}
+      />
       {data && (
         <div className="flex flex-col items-end gap-6">
-          <div className="flex items-center items-stretch gap-4 w-full">
+          <div className="flex items-stretch gap-4 w-full">
             {excludedPlans?.includes("STARTER") ? null : (
               <StarterPlanPricingCard
                 currentPlan={workspace.plan}
@@ -145,3 +176,16 @@ export const ChangePlanForm = ({
     </div>
   );
 };
+
+const isUpgradingPlan = (
+  currentPlan: Plan,
+  targetPlan: "STARTER" | "PRO",
+): boolean => {
+  if (currentPlan === Plan.FREE) {
+    return targetPlan === Plan.STARTER || targetPlan === Plan.PRO;
+  }
+  if (currentPlan === Plan.STARTER) {
+    return targetPlan === Plan.PRO;
+  }
+  return false;
+};

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

@@ -101,14 +101,13 @@ export const PreCheckoutDialog = ({
     const vatType = taxIdTypes.find(
       (taxIdType) => taxIdType.code === vat.code,
     )?.type;
-    if (!vatType) throw new Error("Could not find VAT type");
     createCheckoutSession({
       ...selectedSubscription,
       email,
       company,
       returnUrl: window.location.href,
       vat:
-        vat.value && vat.code ? { type: vatType, value: vat.value } : undefined,
+        vatType && vat.value ? { type: vatType, value: vat.value } : undefined,
     });
   };
 

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

@@ -0,0 +1,103 @@
+import { useQuery } from "@tanstack/react-query";
+import { useTranslate } from "@tolgee/react";
+import { formatPrice } from "@typebot.io/billing/helpers/formatPrice";
+import { isDefined } from "@typebot.io/lib/utils";
+import { AlertDialog } from "@typebot.io/ui/components/AlertDialog";
+import { Button } from "@typebot.io/ui/components/Button";
+import { LoaderCircleIcon } from "@typebot.io/ui/icons/LoaderCircleIcon";
+import { useRef, useState } from "react";
+import { trpc } from "@/lib/queryClient";
+
+type Props = {
+  isOpen: boolean;
+  workspaceId: string;
+  targetPlan: "STARTER" | "PRO" | undefined;
+  onConfirm: () => Promise<unknown> | unknown;
+  onClose: () => void;
+};
+
+export const UpgradeConfirmationDialog = ({
+  isOpen,
+  workspaceId,
+  targetPlan,
+  onConfirm,
+  onClose,
+}: Props) => {
+  const { t } = useTranslate();
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
+
+  const { data: preview, isLoading: isLoadingPreview } = useQuery(
+    trpc.billing.getSubscriptionPreview.queryOptions(
+      {
+        workspaceId,
+        plan: targetPlan!,
+      },
+      {
+        enabled: isOpen && isDefined(targetPlan),
+      },
+    ),
+  );
+
+  const onConfirmClick = async () => {
+    setConfirmLoading(true);
+    try {
+      await onConfirm();
+    } catch (_e) {
+      setConfirmLoading(false);
+      return;
+    }
+    setConfirmLoading(false);
+    onClose();
+  };
+
+  return (
+    <AlertDialog.Root isOpen={isOpen} onClose={onClose}>
+      <AlertDialog.Popup initialFocus={cancelRef}>
+        <AlertDialog.Title>
+          {t("billing.upgradeModal.title", { plan: targetPlan })}
+        </AlertDialog.Title>
+        <div className="flex flex-col gap-4">
+          {isLoadingPreview ? (
+            <div className="flex items-center gap-2">
+              <LoaderCircleIcon className="animate-spin" />
+              <p>{t("billing.upgradeModal.loading")}</p>
+            </div>
+          ) : preview ? (
+            <div className="flex flex-col gap-2">
+              <p>
+                {t("billing.upgradeModal.description", {
+                  plan: targetPlan,
+                })}
+              </p>
+              <div className="flex items-center gap-2 text-lg font-semibold">
+                <span>{t("billing.upgradeModal.amountLabel")}:</span>
+                <span>
+                  {formatPrice(preview.amountDue / 100, {
+                    currency: preview.currency,
+                    maxFractionDigits: 2,
+                  })}
+                </span>
+              </div>
+              <p className="text-sm text-gray-500">
+                {t("billing.upgradeModal.prorationNote")}
+              </p>
+            </div>
+          ) : null}
+        </div>
+        <AlertDialog.Footer>
+          <AlertDialog.CloseButton variant="secondary" ref={cancelRef}>
+            {t("cancel")}
+          </AlertDialog.CloseButton>
+          <Button
+            variant="default"
+            onClick={onConfirmClick}
+            disabled={confirmLoading || isLoadingPreview}
+          >
+            {t("billing.upgradeModal.confirmButton")}
+          </Button>
+        </AlertDialog.Footer>
+      </AlertDialog.Popup>
+    </AlertDialog.Root>
+  );
+};

apps/builder/src/features/workspace/WorkspaceProvider.tsx

@@ -181,7 +181,9 @@ export const WorkspaceProvider = ({
     if (!workspaces) return;
     const name = parseNewName(userFullName, workspaces);
     const { workspace } = await createWorkspaceMutation.mutateAsync({ name });
-    setWorkspaceId(workspace.id);
+    setTimeout(() => {
+      switchWorkspace(workspace.id);
+    }, 1000);
   };
 
   const updateWorkspace = (updates: WorkspaceUpdateProps) => {

apps/builder/src/i18n/en.json

@@ -109,6 +109,12 @@
   "billing.pricingCard.upgradeButton.current": "Your current plan",
   "billing.tiersModal.heading": "Chats pricing table",
   "billing.updateSuccessToast.description": "Workspace {plan} plan successfully updated",
+  "billing.upgradeModal.amountLabel": "Amount to pay now",
+  "billing.upgradeModal.confirmButton": "Confirm upgrade",
+  "billing.upgradeModal.description": "You are about to upgrade to the {plan} plan.",
+  "billing.upgradeModal.loading": "Calculating price...",
+  "billing.upgradeModal.prorationNote": "This amount is prorated based on your current billing cycle.",
+  "billing.upgradeModal.title": "Upgrade to {plan}",
   "billing.upgradeLimitLabel": "You need to upgrade your plan in order to {type}",
   "billing.usage.chats.alert.soonReach": "Your typebots are popular! You will soon reach your plan's chats limit.",
   "billing.usage.chats.alert.updatePlan": "Make sure to update your plan to increase this limit and continue chatting with your users.",