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,7 +38,6 @@ export default withRateLimit(
       return res.status(405).json({ error: "Method not allowed" });
     }
 
-    try {
     const { user, db } = await createNextApiContext(req);
 
     if (!user) {
@@ -49,6 +48,7 @@ export default withRateLimit(
     const {
       successUrl,
       cancelUrl,
+      plan,
       billing,
       workspacePublicId,
       slug,
@@ -57,7 +57,7 @@ export default withRateLimit(
       workspaceSlug,
     } = body;
 
-      if (!successUrl || !cancelUrl) {
+    if (!successUrl || !cancelUrl || !plan) {
       return res.status(400).json({ error: "Missing required fields" });
     }
 
@@ -97,7 +97,7 @@ export default withRateLimit(
       }
 
       const subscription = await subscriptionRepo.create(db, {
-          plan: "pro",
+        plan: plan,
         referenceId: workspacePublicId,
         userId: user.id,
         stripeCustomerId: user.stripeCustomerId ?? "",
@@ -115,9 +115,9 @@ export default withRateLimit(
 
     const isTeam = body.plan === "team";
     const annualPriceId = isTeam
-        ? (process.env.STRIPE_TEAM_PLAN_ANNUAL_PRICE_ID ??
+      ? (process.env.STRIPE_TEAM_PLAN_YEARLY_PRICE_ID ??
         process.env.STRIPE_TEAM_PLAN_MONTHLY_PRICE_ID)
-        : (process.env.STRIPE_PRO_PLAN_ANNUAL_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
@@ -141,14 +141,11 @@ export default withRateLimit(
         ...(workspaceName && { workspaceName }),
         ...(workspaceDescription && { workspaceDescription }),
         ...(subscriptionId && { subscriptionId: String(subscriptionId) }),
-          plan: body.plan ?? "pro",
+        plan: plan,
         isNewWorkspace: workspaceName ? "true" : "false",
       },
     });
 
     return res.status(200).json({ url: session.url });
-    } catch (error) {
-      return res.status(500).json({ error: "Error creating checkout session" });
-    }
   }),
 );

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
     }
 
+    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) {