fix: toggle spacing

apps/web/src/components/LabelForm.tsx

@@ -207,7 +207,7 @@ export function LabelForm({
         />
       </div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         {!isEdit && (
           <Toggle
             label={t`Create another`}

apps/web/src/components/NewWorkspaceForm.tsx

@@ -114,42 +114,6 @@ export function NewWorkspaceForm() {
           weekStartDay: 1,
         });
 
-        // If in cloud and Pro toggle is enabled, create checkout session for pro
-        if (env("NEXT_PUBLIC_KAN_ENV") === "cloud" && isProToggleEnabled) {
-          try {
-            const response = await fetch(
-              "/api/stripe/create_checkout_session",
-              {
-                method: "POST",
-                headers: {
-                  "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                  slug: slug || undefined,
-                  workspacePublicId: values.publicId,
-                  cancelUrl: window.location.pathname + window.location.search,
-                  successUrl: "/boards",
-                }),
-              },
-            );
-
-            const data = await response.json();
-            const url = (data as { url: string }).url;
-
-            if (url) {
-              window.location.href = url;
-              return; // Don't close modal if redirecting to checkout
-            }
-          } catch (error) {
-            console.error("Error creating checkout session:", error);
-            showPopup({
-              header: t`Error upgrading to Pro`,
-              message: t`Workspace created successfully. You can upgrade later in settings.`,
-              icon: "warning",
-            });
-          }
-        }
-
         closeModal();
       }
     },
@@ -361,7 +325,7 @@ export function NewWorkspaceForm() {
       </div>
       <div
         className={twMerge(
-          "mt-6 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600",
+          "mt-6 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600",
           !showProBenefits && "mt-12",
         )}
       >

apps/web/src/pages/api/stripe/create_checkout_session.ts

@@ -20,13 +20,13 @@ const workspaceSlugSchema = z
 interface CheckoutSessionRequest {
   successUrl: string;
   cancelUrl: string;
+  plan: "team" | "pro";
   billing?: string;
   workspacePublicId?: string;
   slug?: string;
   workspaceName?: string;
   workspaceDescription?: string;
   workspaceSlug?: string;
-  plan?: string;
 }
 
 export default withRateLimit(
@@ -38,117 +38,114 @@ export default withRateLimit(
       return res.status(405).json({ error: "Method not allowed" });
     }
 
-    try {
+    const { user, db } = await createNextApiContext(req);
-      const { user, db } = await createNextApiContext(req);
 
-      if (!user) {
+    if (!user) {
-        return res.status(404).json({ error: "User not found" });
+      return res.status(404).json({ error: "User not found" });
+    }
+
+    const body = req.body as CheckoutSessionRequest;
+    const {
+      successUrl,
+      cancelUrl,
+      plan,
+      billing,
+      workspacePublicId,
+      slug,
+      workspaceName,
+      workspaceDescription,
+      workspaceSlug,
+    } = body;
+
+    if (!successUrl || !cancelUrl || !plan) {
+      return res.status(400).json({ error: "Missing required fields" });
+    }
+
+    if (!workspacePublicId && !workspaceName) {
+      return res
+        .status(400)
+        .json({ error: "Must provide workspacePublicId or workspaceName" });
+    }
+
+    const resolvedSlug = slug ?? workspaceSlug;
+
+    if (resolvedSlug) {
+      const slugResult = workspaceSlugSchema.safeParse(resolvedSlug);
+      if (!slugResult.success) {
+        return res.status(400).json({ error: "Invalid workspace slug" });
       }
+    }
 
-      const body = req.body as CheckoutSessionRequest;
+    let resolvedWorkspacePublicId = workspacePublicId;
-      const {
+    let subscriptionId: number | undefined;
-        successUrl,
+
-        cancelUrl,
+    if (workspacePublicId) {
-        billing,
+      // Existing workspace upgrade
+      const workspace = await workspaceRepo.getByPublicId(
+        db,
         workspacePublicId,
-        slug,
+      );
-        workspaceName,
-        workspaceDescription,
-        workspaceSlug,
-      } = body;
 
-      if (!successUrl || !cancelUrl) {
+      if (!workspace) {
-        return res.status(400).json({ error: "Missing required fields" });
+        return res.status(404).json({ error: "Workspace not found" });
       }
 
-      if (!workspacePublicId && !workspaceName) {
+      try {
-        return res
+        await assertPermission(db, user.id, workspace.id, "workspace:manage");
-          .status(400)
+      } catch {
-          .json({ error: "Must provide workspacePublicId or workspaceName" });
+        return res.status(403).json({ error: "Unauthorized" });
       }
 
-      const resolvedSlug = slug ?? workspaceSlug;
+      const subscription = await subscriptionRepo.create(db, {
-
+        plan: plan,
-      if (resolvedSlug) {
+        referenceId: workspacePublicId,
-        const slugResult = workspaceSlugSchema.safeParse(resolvedSlug);
+        userId: user.id,
-        if (!slugResult.success) {
+        stripeCustomerId: user.stripeCustomerId ?? "",
-          return res.status(400).json({ error: "Invalid workspace slug" });
+        status: "incomplete",
-        }
-      }
-
-      let resolvedWorkspacePublicId = workspacePublicId;
-      let subscriptionId: number | undefined;
-
-      if (workspacePublicId) {
-        // Existing workspace upgrade
-        const workspace = await workspaceRepo.getByPublicId(
-          db,
-          workspacePublicId,
-        );
-
-        if (!workspace) {
-          return res.status(404).json({ error: "Workspace not found" });
-        }
-
-        try {
-          await assertPermission(db, user.id, workspace.id, "workspace:manage");
-        } catch {
-          return res.status(403).json({ error: "Unauthorized" });
-        }
-
-        const subscription = await subscriptionRepo.create(db, {
-          plan: "pro",
-          referenceId: workspacePublicId,
-          userId: user.id,
-          stripeCustomerId: user.stripeCustomerId ?? "",
-          status: "incomplete",
-        });
-
-        subscriptionId = subscription?.id;
-
-        if (!subscriptionId) {
-          return res.status(500).json({ error: "Error creating subscription" });
-        }
-      } else {
-        resolvedWorkspacePublicId = generateUID();
-      }
-
-      const isTeam = body.plan === "team";
-      const annualPriceId = isTeam
-        ? (process.env.STRIPE_TEAM_PLAN_ANNUAL_PRICE_ID ??
-          process.env.STRIPE_TEAM_PLAN_MONTHLY_PRICE_ID)
-        : (process.env.STRIPE_PRO_PLAN_ANNUAL_PRICE_ID ??
-          process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID);
-      const monthlyPriceId = isTeam
-        ? process.env.STRIPE_TEAM_PLAN_MONTHLY_PRICE_ID
-        : process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID;
-      const priceId = billing === "annual" ? annualPriceId : monthlyPriceId;
-
-      const session = await stripe.checkout.sessions.create({
-        mode: "subscription",
-        payment_method_collection: "always",
-        line_items: [{ price: priceId, quantity: 1 }],
-        subscription_data: { trial_period_days: 14 },
-        success_url: `${env("NEXT_PUBLIC_BASE_URL")}${successUrl}?workspacePublicId=${resolvedWorkspacePublicId}`,
-        cancel_url: `${env("NEXT_PUBLIC_BASE_URL")}${cancelUrl}`,
-        client_reference_id: resolvedWorkspacePublicId,
-        customer: user.stripeCustomerId ?? undefined,
-        metadata: {
-          workspacePublicId: resolvedWorkspacePublicId!,
-          userId: user.id,
-          userEmail: user.email ?? "",
-          ...(resolvedSlug && { workspaceSlug: resolvedSlug }),
-          ...(workspaceName && { workspaceName }),
-          ...(workspaceDescription && { workspaceDescription }),
-          ...(subscriptionId && { subscriptionId: String(subscriptionId) }),
-          plan: body.plan ?? "pro",
-          isNewWorkspace: workspaceName ? "true" : "false",
-        },
       });
 
-      return res.status(200).json({ url: session.url });
+      subscriptionId = subscription?.id;
-    } catch (error) {
+
-      return res.status(500).json({ error: "Error creating checkout session" });
+      if (!subscriptionId) {
+        return res.status(500).json({ error: "Error creating subscription" });
+      }
+    } else {
+      resolvedWorkspacePublicId = generateUID();
     }
+
+    const isTeam = body.plan === "team";
+    const annualPriceId = isTeam
+      ? (process.env.STRIPE_TEAM_PLAN_YEARLY_PRICE_ID ??
+        process.env.STRIPE_TEAM_PLAN_MONTHLY_PRICE_ID)
+      : (process.env.STRIPE_PRO_PLAN_YEARLY_PRICE_ID ??
+        process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID);
+    const monthlyPriceId = isTeam
+      ? process.env.STRIPE_TEAM_PLAN_MONTHLY_PRICE_ID
+      : process.env.STRIPE_PRO_PLAN_MONTHLY_PRICE_ID;
+    const priceId = billing === "annual" ? annualPriceId : monthlyPriceId;
+
+    const session = await stripe.checkout.sessions.create({
+      mode: "subscription",
+      payment_method_collection: "always",
+      line_items: [{ price: priceId, quantity: 1 }],
+      subscription_data: { trial_period_days: 14 },
+      success_url: `${env("NEXT_PUBLIC_BASE_URL")}${successUrl}?workspacePublicId=${resolvedWorkspacePublicId}`,
+      cancel_url: `${env("NEXT_PUBLIC_BASE_URL")}${cancelUrl}`,
+      client_reference_id: resolvedWorkspacePublicId,
+      customer: user.stripeCustomerId ?? undefined,
+      metadata: {
+        workspacePublicId: resolvedWorkspacePublicId!,
+        userId: user.id,
+        userEmail: user.email ?? "",
+        ...(resolvedSlug && { workspaceSlug: resolvedSlug }),
+        ...(workspaceName && { workspaceName }),
+        ...(workspaceDescription && { workspaceDescription }),
+        ...(subscriptionId && { subscriptionId: String(subscriptionId) }),
+        plan: plan,
+        isNewWorkspace: workspaceName ? "true" : "false",
+      },
+    });
+
+    return res.status(200).json({ url: session.url });
   }),
 );

apps/web/src/views/board/components/NewCardForm.tsx

@@ -515,7 +515,7 @@ export function NewCardForm({
         </div>
       </div>
 
-      <div className="mt-5 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-5 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={t`Create another`}
           isChecked={isCreateAnotherEnabled}

apps/web/src/views/board/components/NewListForm.tsx

@@ -136,7 +136,7 @@ export function NewListForm({
           }}
         />
       </div>
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={t`Create another`}
           isChecked={isCreateAnotherEnabled}

apps/web/src/views/boards/components/ImportBoardsForm.tsx

@@ -184,7 +184,7 @@ const SelectSource = ({
         />
       </div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <div>
           <Button
             type="submit"
@@ -310,7 +310,7 @@ const ImportGithub: React.FC = () => {
     <form onSubmit={handleSubmitProjects(onSubmitProjects)}>
       <div className="h-[105px] overflow-auto px-5">{renderContent()}</div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={t`Select all`}
           isChecked={!!isSelectAllEnabled}
@@ -459,7 +459,7 @@ const ImportTrello: React.FC = () => {
     <form onSubmit={handleSubmitBoards(onSubmitBoards)}>
       <div className="h-[105px] overflow-auto px-5">{renderContent()}</div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={t`Select all`}
           isChecked={!!isSelectAllEnabled}

apps/web/src/views/boards/components/NewBoardForm.tsx

@@ -148,7 +148,7 @@ export function NewBoardForm({ isTemplate }: { isTemplate?: boolean }) {
         showTemplates={showTemplates}
         customTemplates={formattedTemplates ?? []}
       />
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         {!isTemplate && (
           <Toggle
             label={t`Use template`}

apps/web/src/views/members/components/InviteMemberForm.tsx

@@ -341,7 +341,7 @@ export function InviteMemberForm({
         )}
       </div>
 
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
+      <div className="mt-12 flex items-center justify-end space-x-4 border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
         <Toggle
           label={
             isShareInviteLinkEnabled

apps/web/src/views/settings/components/UpgradeToProConfirmation.tsx

@@ -24,6 +24,8 @@ export function UpgradeToProConfirmation({
         body: JSON.stringify({
           ...(entityId && { slug: entityId }),
           workspacePublicId: workspacePublicId,
+          plan: "pro",
+          billing: "monthly",
           cancelUrl: "/settings",
           successUrl: "/settings",
         }),

packages/api/src/utils/apiLogging.ts

@@ -20,8 +20,11 @@ export function withApiLogging(
     const requestId = randomUUID();
     const route = req.url?.split("?")[0] ?? "unknown";
     const input = {
-      ...(req.query && Object.keys(req.query).length > 0 && { query: req.query }),
+      ...(req.query &&
-      ...(req.body && typeof req.body === "object" && Object.keys(req.body).length > 0 && { body: req.body }),
+        Object.keys(req.query).length > 0 && { query: req.query }),
+      ...(req.body &&
+        typeof req.body === "object" &&
+        Object.keys(req.body).length > 0 && { body: req.body }),
     };
 
     let statusCode = 200;
@@ -41,7 +44,16 @@ export function withApiLogging(
       // unauthenticated or auth unavailable
     }
 
-    await handler(req, res);
+    let handlerError: unknown;
+    try {
+      await handler(req, res);
+    } catch (err) {
+      handlerError = err;
+      statusCode = 500;
+      if (!res.headersSent) {
+        res.status(500).json({ error: "Internal server error" });
+      }
+    }
 
     const duration = Date.now() - start;
     const meta = {
@@ -53,6 +65,10 @@ export function withApiLogging(
       ...(isCloud && email && { email }),
       ...(Object.keys(input).length > 0 && { input }),
       status: statusCode,
+      ...(handlerError instanceof Error && {
+        error: handlerError.message,
+        stack: handlerError.stack,
+      }),
     };
 
     if (statusCode < 400) {