fix(RecursivePermission): pass only one child to the tooltip

apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx

@@ -103,11 +103,13 @@ export const RecursivePermission: React.FC<
           align: "start",
         }}
       >
-        <div className="flex items-center gap-2 w-full">
-          <PermissionToggle permissionId={id} roleId={roleId} checked={checked} />
-          <pre className="text-sm text-accent-12 font-medium">{k}</pre>
+        <div className="w-full">
+          <div className="flex items-center gap-2 w-full">
+            <PermissionToggle permissionId={id} roleId={roleId} checked={checked} />
+            <pre className="text-sm text-accent-12 font-medium">{k}</pre>
+          </div>
+          {description && <p className="text-xs text-accent-11 mt-0.5">{description}</p>}
         </div>
-        {description && <p className="text-xs text-accent-11 mt-0.5">{description}</p>}
       </RatelimitOverviewTooltip>
     );
   }

apps/dashboard/app/(app)/settings/billing/client.tsx

@@ -40,7 +40,7 @@ type Props = {
   }>;
 };
 
-export const Client: React.FC<Props> = (props) => {
+const Mutations = () => {
   const router = useRouter();
 
   const createSubscription = trpc.stripe.createSubscription.useMutation({
@@ -70,6 +70,21 @@ export const Client: React.FC<Props> = (props) => {
       toast.error(err.message);
     },
   });
+  const uncancelSubscription = trpc.stripe.uncancelSubscription.useMutation({
+    onSuccess: () => {
+      router.refresh();
+      toast.info("Subscription resumed");
+    },
+    onError: (err) => {
+      toast.error(err.message);
+    },
+  });
+
+  return { createSubscription, updateSubscription, cancelSubscription, uncancelSubscription };
+};
+
+export const Client: React.FC<Props> = (props) => {
+  const mutations = Mutations();
 
   const allowUpdate =
     props.subscription && ["active", "trialing"].includes(props.subscription.status);
@@ -142,7 +157,7 @@ export const Client: React.FC<Props> = (props) => {
                           p.quotas.requestsPerMonth,
                         )} per month immediately.`}
                         onConfirm={async () =>
-                          updateSubscription.mutateAsync({
+                          mutations.updateSubscription.mutateAsync({
                             oldProductId: props.currentProductId!,
                             newProductId: p.id,
                           })
@@ -161,7 +176,9 @@ export const Client: React.FC<Props> = (props) => {
                         } updates your request quota to ${formatNumber(
                           p.quotas.requestsPerMonth,
                         )} per month immediately.`}
-                        onConfirm={() => createSubscription.mutateAsync({ productId: p.id })}
+                        onConfirm={() =>
+                          mutations.createSubscription.mutateAsync({ productId: p.id })
+                        }
                         fineprint={
                           props.hasPreviousSubscriptions
                             ? "Do you need another trial? Contact support.unkey.dev"
@@ -220,7 +237,7 @@ export const Client: React.FC<Props> = (props) => {
                 <Confirm
                   title="Cancel plan"
                   description="Canceling your plan will downgrade your workspace to the free tier at the end of the current period. You can resume your subscription until then."
-                  onConfirm={() => cancelSubscription.mutateAsync()}
+                  onConfirm={() => mutations.cancelSubscription.mutateAsync()}
                   trigger={(onClick) => (
                     <Button variant="outline" color="danger" size="lg" onClick={onClick}>
                       Cancel Plan
@@ -253,20 +270,12 @@ const FreeTierAlert: React.FC = () => {
 };
 
 const CancelAlert: React.FC<{ cancelAt?: number }> = (props) => {
-  const router = useRouter();
-  const uncancelSubscription = trpc.stripe.uncancelSubscription.useMutation({
-    onSuccess: () => {
-      router.refresh();
-      toast.info("Subscription resumed");
-    },
-    onError: (err) => {
-      toast.error(err.message);
-    },
-  });
+  const mutations = Mutations();
 
   if (!props.cancelAt) {
     return null;
   }
+
   return (
     <SettingCard
       title="Cancellation scheduled"
@@ -284,9 +293,9 @@ const CancelAlert: React.FC<{ cancelAt?: number }> = (props) => {
       <div className="flex justify-end w-full">
         <Button
           variant="primary"
-          loading={uncancelSubscription.isLoading}
-          disabled={uncancelSubscription.isLoading}
-          onClick={() => uncancelSubscription.mutate()}
+          loading={mutations.uncancelSubscription.isLoading}
+          disabled={mutations.uncancelSubscription.isLoading}
+          onClick={() => mutations.uncancelSubscription.mutate()}
         >
           Resubscribe
         </Button>

apps/dashboard/app/(app)/settings/billing/components/confirmation.tsx

@@ -36,9 +36,8 @@ export const Confirm: React.FC<Props> = (props) => {
               className="w-full rounded-lg"
               onClick={async () => {
                 setLoading(true);
-                await props.onConfirm();
-
                 setOpen(false);
+                await props.onConfirm();
                 setLoading(false);
               }}
             >

apps/dashboard/app/(app)/settings/billing/page.tsx

@@ -7,11 +7,11 @@ import { SettingCard } from "@unkey/ui";
 import { Button, Empty, Input } from "@unkey/ui";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { Suspense } from "react";
 import Stripe from "stripe";
 import { WorkspaceNavbar } from "../workspace-navbar";
 import { Client } from "./client";
 import { Shell } from "./components/shell";
-
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
 
@@ -165,25 +165,39 @@ export default async function BillingPage() {
   ]);
 
   return (
-    <Client
-      hasPreviousSubscriptions={hasPreviousSubscriptions}
-      workspace={workspace}
-      products={products}
-      usage={{
-        current: usedVerifications + usedRatelimits,
-        max: workspace.quotas?.requestsPerMonth ?? 150_000,
-      }}
-      subscription={
-        subscription
-          ? {
-              id: subscription.id,
-              status: subscription.status,
-              trialUntil: subscription.trial_end ? subscription.trial_end * 1000 : undefined,
-              cancelAt: subscription.cancel_at ? subscription.cancel_at * 1000 : undefined,
-            }
-          : undefined
+    <Suspense
+      fallback={
+        <div className="animate-pulse">
+          <WorkspaceNavbar
+            workspace={workspace}
+            activePage={{ href: "billing", text: "Billing" }}
+          />
+          <Shell workspace={workspace}>
+            <div className="w-full h-[500px] bg-gray-100 dark:bg-gray-800 rounded-lg" />
+          </Shell>
+        </div>
       }
-      currentProductId={subscription?.items.data.at(0)?.plan.product?.toString() ?? undefined}
-    />
+    >
+      <Client
+        hasPreviousSubscriptions={hasPreviousSubscriptions}
+        workspace={workspace}
+        products={products}
+        usage={{
+          current: usedVerifications + usedRatelimits,
+          max: workspace.quotas?.requestsPerMonth ?? 150_000,
+        }}
+        subscription={
+          subscription
+            ? {
+                id: subscription.id,
+                status: subscription.status,
+                trialUntil: subscription.trial_end ? subscription.trial_end * 1000 : undefined,
+                cancelAt: subscription.cancel_at ? subscription.cancel_at * 1000 : undefined,
+              }
+            : undefined
+        }
+        currentProductId={subscription?.items.data.at(0)?.plan.product?.toString() ?? undefined}
+      />
+    </Suspense>
   );
 }