Billing UI (#386)

skyvern-frontend/src/routes/settings/Settings.tsx

@@ -20,7 +20,7 @@ function Settings() {
     useSettingsStore();
 
   return (
-    <div className="flex flex-col gap-8 max-w-6xl mx-auto p-8 pt-0">
+    <div className="flex flex-col gap-8">
       <Card>
         <CardHeader className="border-b-2">
           <CardTitle className="text-lg">Settings</CardTitle>

skyvern-frontend/src/routes/settings/SettingsPageLayout.tsx

@@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom";
 
 function SettingsPageLayout() {
   return (
-    <div className="flex flex-col gap-4 px-6">
+    <div className="max-w-6xl mx-auto px-8">
       <main>
         <Outlet />
       </main>

skyvern-frontend/src/routes/tasks/TasksPageLayout.tsx

@@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom";
 
 function TasksPageLayout() {
   return (
-    <div className="px-6 flex grow flex-col gap-4">
+    <div className="max-w-6xl mx-auto px-8">
       <main>
         <Outlet />
       </main>

skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx

@@ -36,6 +36,7 @@ import fetchToCurl from "fetch-to-curl";
 import { apiBaseUrl } from "@/util/env";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import { useApiCredential } from "@/hooks/useApiCredential";
+import { AxiosError } from "axios";
 
 const createNewTaskFormSchema = z
   .object({
@@ -111,7 +112,23 @@ function CreateNewTaskForm({ initialValues }: Props) {
         { data: { task_id: string } }
       >("/tasks", taskRequest);
     },
-    onError: (error) => {
+    onError: (error: AxiosError) => {
+      if (error.response?.status === 402) {
+        toast({
+          variant: "destructive",
+          title: "Failed to create task",
+          description:
+            "You don't have enough credits to run this task. Go to billing to see your credit balance.",
+          action: (
+            <ToastAction altText="Go to Billing">
+              <Button asChild>
+                <Link to="billing">Go to Billing</Link>
+              </Button>
+            </ToastAction>
+          ),
+        });
+        return;
+      }
       toast({
         variant: "destructive",
         title: "There was an error creating the task.",
@@ -120,6 +137,7 @@ function CreateNewTaskForm({ initialValues }: Props) {
     },
     onSuccess: (response) => {
       toast({
+        variant: "success",
         title: "Task Created",
         description: `${response.data.task_id} created successfully.`,
         action: (

skyvern-frontend/src/routes/tasks/create/TaskTemplates.tsx

@@ -43,7 +43,7 @@ function TaskTemplates() {
   const navigate = useNavigate();
 
   return (
-    <div className="max-w-6xl mx-auto px-8">
+    <div>
       <section className="py-4">
         <header>
           <h1 className="text-3xl">Skyvern Templates</h1>

skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx

@@ -54,7 +54,7 @@ function TaskDetails() {
   }
 
   return (
-    <div className="flex flex-col gap-8 max-w-6xl mx-auto p-8 pt-0">
+    <div className="flex flex-col gap-8">
       <div className="flex items-center">
         <Label className="w-32 shrink-0 text-lg">Task ID</Label>
         <Input value={taskId} readOnly />

skyvern-frontend/src/routes/tasks/list/TaskList.tsx

@@ -11,7 +11,7 @@ import { TaskHistory } from "./TaskHistory";
 
 function TaskList() {
   return (
-    <div className="flex flex-col gap-8 max-w-6xl mx-auto p-8 pt-0">
+    <div className="flex flex-col gap-8">
       <Card>
         <CardHeader className="border-b-2">
           <CardTitle className="text-xl">Running Tasks</CardTitle>