From 195fbe4f630aac73de3e563092a21f3e8d2b0154 Mon Sep 17 00:00:00 2001
From: Yujong Lee <yujonglee.dev@gmail.com>
Date: Sun, 1 Mar 2026 17:57:26 +0900
Subject: [PATCH] wip

Signed-off-by: Yujong Lee <yujonglee.dev@gmail.com>
---
 apps/desktop/src/auth/useConnections.ts       |   4 +-
 .../components/oauth/provider-content.tsx     |  38 +-
 apps/web/src/hooks/use-api-client.ts          |  21 ++
 apps/web/src/hooks/use-billing.ts             |  12 +-
 apps/web/src/hooks/use-connections.ts         |  14 +-
 .../_view/app/-account-integrations.tsx       |  31 +-
 .../routes/_view/app/-account-settings.tsx    |   3 +-
 .../src/routes/_view/app/-integration-ui.tsx  |  56 +++
 .../_view/app/-integrations-connect-flow.tsx  | 329 ++++++++++--------
 .../app/-integrations-disconnect-flow.tsx     | 140 +++-----
 .../app/-integrations-upgrade-prompt.tsx      |  85 +++--
 apps/web/src/routes/_view/app/integration.tsx |  33 +-
 12 files changed, 439 insertions(+), 327 deletions(-)
 create mode 100644 apps/web/src/hooks/use-api-client.ts
 create mode 100644 apps/web/src/routes/_view/app/-integration-ui.tsx

diff --git a/apps/desktop/src/auth/useConnections.ts b/apps/desktop/src/auth/useConnections.ts
index eefeccd96f..aa6fab2d7e 100644
--- a/apps/desktop/src/auth/useConnections.ts
+++ b/apps/desktop/src/auth/useConnections.ts
@@ -7,7 +7,7 @@ import { useAuth } from "./context";
 
 import { env } from "~/env";
 
-export function useConnections() {
+export function useConnections({ enabled = true }: { enabled?: boolean } = {}) {
   const auth = useAuth();
   const userId = auth?.session?.user.id;
 
@@ -25,6 +25,6 @@ export function useConnections() {
       }
       return data?.connections ?? [];
     },
-    enabled: !!userId,
+    enabled: !!userId && enabled,
   });
 }
diff --git a/apps/desktop/src/calendar/components/oauth/provider-content.tsx b/apps/desktop/src/calendar/components/oauth/provider-content.tsx
index f8cd0936b0..cb6334e5c3 100644
--- a/apps/desktop/src/calendar/components/oauth/provider-content.tsx
+++ b/apps/desktop/src/calendar/components/oauth/provider-content.tsx
@@ -13,11 +13,15 @@ import { useBillingAccess } from "~/auth/billing";
 import { useConnections } from "~/auth/useConnections";
 import type { CalendarProvider } from "~/calendar/components/shared";
 import { buildWebAppUrl } from "~/shared/utils";
+import { useTabs } from "~/store/zustand/tabs";
 
 export function OAuthProviderContent({ config }: { config: CalendarProvider }) {
   const auth = useAuth();
   const billing = useBillingAccess();
-  const { data: connections, isError } = useConnections();
+  const openNew = useTabs((state) => state.openNew);
+  const { data: connections, isError } = useConnections({
+    enabled: billing.isPro,
+  });
   const connection = connections?.find(
     (c) => c.integration_id === config.nangoIntegrationId,
   );
@@ -118,16 +122,6 @@ export function OAuthProviderContent({ config }: { config: CalendarProvider }) {
     );
   }
 
-  if (isError) {
-    return (
-      <div className="px-1 pt-1 pb-2">
-        <span className="text-xs text-red-600">
-          Failed to load integration status
-        </span>
-      </div>
-    );
-  }
-
   if (!auth.session) {
     const connectButton = (
       <button
@@ -158,27 +152,29 @@ export function OAuthProviderContent({ config }: { config: CalendarProvider }) {
   if (!billing.isPro) {
     return (
       <div className="flex flex-col gap-1.5 px-1 pt-1 pb-2">
-        <div className="flex items-center gap-1.5">
-          <span className="rounded border border-amber-200 bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700">
-            Pro
-          </span>
-          <span className="text-xs text-neutral-500">
-            Required to connect {config.displayName} Calendar
-          </span>
-        </div>
         <button
-          onClick={() => billing.upgradeToPro()}
+          onClick={() => openNew({ type: "settings" })}
           className={cn([
             "flex h-9 w-full cursor-pointer items-center justify-center rounded-lg text-sm font-medium transition-all",
             "bg-neutral-900 text-white hover:bg-neutral-800 active:scale-[98%]",
           ])}
         >
-          Upgrade to Pro
+          Pro Plan Required
         </button>
       </div>
     );
   }
 
+  if (isError) {
+    return (
+      <div className="px-1 pt-1 pb-2">
+        <span className="text-xs text-red-600">
+          Failed to load integration status
+        </span>
+      </div>
+    );
+  }
+
   return (
     <div className="px-1 pt-1 pb-2">
       <button
diff --git a/apps/web/src/hooks/use-api-client.ts b/apps/web/src/hooks/use-api-client.ts
new file mode 100644
index 0000000000..3d9e893f73
--- /dev/null
+++ b/apps/web/src/hooks/use-api-client.ts
@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+
+import { createClient } from "@hypr/api-client/client";
+
+import { env } from "@/env";
+import { getAccessToken } from "@/functions/access-token";
+
+export type ApiClient = ReturnType<typeof createClient>;
+
+export function useApiClient() {
+  const getClient = useCallback(async (): Promise<ApiClient> => {
+    const token = await getAccessToken();
+
+    return createClient({
+      baseUrl: env.VITE_API_URL,
+      headers: { Authorization: `Bearer ${token}` },
+    });
+  }, []);
+
+  return { getClient };
+}
diff --git a/apps/web/src/hooks/use-billing.ts b/apps/web/src/hooks/use-billing.ts
index 07ed1bc0f6..b530d1d18a 100644
--- a/apps/web/src/hooks/use-billing.ts
+++ b/apps/web/src/hooks/use-billing.ts
@@ -35,21 +35,18 @@ function deriveFromStripe(
 const DEFAULT_BILLING = deriveBillingInfo(null);
 
 export function useBilling() {
-  const queryClient = useQueryClient();
-
   const jwtQuery = useQuery({
     queryKey: ["billing", "jwt"],
     queryFn: async () => {
       const token = await getAccessToken();
+      console.log("decodeJwtPayload", decodeJwtPayload(token));
       return deriveBillingInfo(decodeJwtPayload(token));
     },
-    retry: false,
   });
 
   const stripeQuery = useQuery({
     queryKey: ["billing", "stripe"],
     queryFn: async () => deriveFromStripe(await syncAfterSuccess()),
-    retry: false,
   });
 
   const billing: BillingInfo =
@@ -60,8 +57,11 @@ export function useBilling() {
   const refreshBilling = useCallback(async () => {
     const supabase = getSupabaseBrowserClient();
     await supabase.auth.refreshSession();
-    await queryClient.invalidateQueries({ queryKey: ["billing"] });
-  }, [queryClient]);
+    console.log("refreshBilling");
+    await jwtQuery.refetch();
+    await stripeQuery.refetch();
+    console.log("refreshBilling done");
+  }, [jwtQuery, stripeQuery]);
 
   return {
     ...billing,
diff --git a/apps/web/src/hooks/use-connections.ts b/apps/web/src/hooks/use-connections.ts
index 420e24d2a9..19d40491d3 100644
--- a/apps/web/src/hooks/use-connections.ts
+++ b/apps/web/src/hooks/use-connections.ts
@@ -1,10 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 
 import { listConnections } from "@hypr/api-client";
-import { createClient } from "@hypr/api-client/client";
 
-import { env } from "@/env";
 import { getAccessToken } from "@/functions/access-token";
+import { useApiClient } from "@/hooks/use-api-client";
 
 function decodeUserId(token: string): string {
   const payload = JSON.parse(atob(token.split(".")[1])) as { sub?: string };
@@ -14,7 +13,9 @@ function decodeUserId(token: string): string {
   return payload.sub;
 }
 
-export function useConnections() {
+export function useConnections({ enabled = true }: { enabled?: boolean } = {}) {
+  const { getClient } = useApiClient();
+
   const authQuery = useQuery({
     queryKey: ["integration-status", "auth"],
     queryFn: async () => {
@@ -29,12 +30,9 @@ export function useConnections() {
 
   return useQuery({
     queryKey: ["integration-status", authQuery.data?.userId],
-    enabled: !!authQuery.data?.userId,
+    enabled: !!authQuery.data?.userId && enabled,
     queryFn: async () => {
-      const client = createClient({
-        baseUrl: env.VITE_API_URL,
-        headers: { Authorization: `Bearer ${authQuery.data?.token}` },
-      });
+      const client = await getClient();
       const { data, error } = await listConnections({ client });
       if (error) {
         throw new Error("Failed to load integrations");
diff --git a/apps/web/src/routes/_view/app/-account-integrations.tsx b/apps/web/src/routes/_view/app/-account-integrations.tsx
index 28d9f9c735..36cae55967 100644
--- a/apps/web/src/routes/_view/app/-account-integrations.tsx
+++ b/apps/web/src/routes/_view/app/-account-integrations.tsx
@@ -12,7 +12,13 @@ const INTEGRATIONS = [
 export function IntegrationsSettingsCard() {
   const navigate = useNavigate();
   const billing = useBilling();
-  const { data: connections, isLoading, isError } = useConnections();
+  const {
+    data: connections,
+    isLoading,
+    isError,
+  } = useConnections({
+    enabled: billing.isPro,
+  });
 
   const getConnectionStatus = (integrationId: string) => {
     return connections?.find((c) => c.integration_id === integrationId);
@@ -43,17 +49,18 @@ export function IntegrationsSettingsCard() {
                   Pro
                 </span>
               )}
-              {isLoading ? (
-                <span className="text-xs text-neutral-400">Checking...</span>
-              ) : isError ? (
-                <span className="rounded-full bg-red-50 px-2 py-0.5 text-xs text-red-600">
-                  Check failed
-                </span>
-              ) : isConnected ? (
-                <span className="rounded-full bg-green-50 px-2 py-0.5 text-xs text-green-600">
-                  Connected
-                </span>
-              ) : null}
+              {billing.isPro &&
+                (isLoading ? (
+                  <span className="text-xs text-neutral-400">Checking...</span>
+                ) : isError ? (
+                  <span className="rounded-full bg-red-50 px-2 py-0.5 text-xs text-red-600">
+                    Check failed
+                  </span>
+                ) : isConnected ? (
+                  <span className="rounded-full bg-green-50 px-2 py-0.5 text-xs text-green-600">
+                    Connected
+                  </span>
+                ) : null)}
             </div>
             {!billing.isPro && !isConnected ? (
               <Link
diff --git a/apps/web/src/routes/_view/app/-account-settings.tsx b/apps/web/src/routes/_view/app/-account-settings.tsx
index 2fa920c79b..d859ad7b5b 100644
--- a/apps/web/src/routes/_view/app/-account-settings.tsx
+++ b/apps/web/src/routes/_view/app/-account-settings.tsx
@@ -98,7 +98,8 @@ export function AccountSettingsCard() {
 
       <div className="flex items-center justify-between border-t border-neutral-100 p-4">
         <div className="text-sm">
-          Current plan: <span className="font-medium">{planDisplay}</span>
+          Current plan: <span className="font-medium">{planDisplay}</span>{" "}
+          <button onClick={() => billing.refreshBilling()}>Refresh</button>
         </div>
         {renderPlanButton()}
       </div>
diff --git a/apps/web/src/routes/_view/app/-integration-ui.tsx b/apps/web/src/routes/_view/app/-integration-ui.tsx
new file mode 100644
index 0000000000..502c7fafd2
--- /dev/null
+++ b/apps/web/src/routes/_view/app/-integration-ui.tsx
@@ -0,0 +1,56 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+import { cn } from "@hypr/utils";
+
+const BUTTON_BASE =
+  "flex h-12 w-full items-center justify-center gap-2 rounded-full text-base font-medium transition-all";
+
+const BUTTON_VARIANTS = {
+  primary: "bg-linear-to-t from-stone-600 to-stone-500 text-white shadow-md",
+  danger: "bg-linear-to-t from-red-600 to-red-500 text-white shadow-md",
+  secondary:
+    "border border-neutral-300 bg-linear-to-b from-white to-stone-50 text-neutral-700 shadow-xs",
+} as const;
+
+const BUTTON_INTERACTIVE =
+  "cursor-pointer hover:scale-[102%] hover:shadow-lg active:scale-[98%]";
+
+const BUTTON_DISABLED =
+  "disabled:cursor-not-allowed disabled:opacity-70 disabled:pointer-events-none";
+
+export function integrationButtonClassName(
+  variant: keyof typeof BUTTON_VARIANTS,
+) {
+  return cn([
+    BUTTON_BASE,
+    BUTTON_VARIANTS[variant],
+    BUTTON_INTERACTIVE,
+    BUTTON_DISABLED,
+  ]);
+}
+
+export function IntegrationButton({
+  variant = "primary",
+  className,
+  ...props
+}: {
+  variant?: keyof typeof BUTTON_VARIANTS;
+  className?: string;
+} & ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      className={cn([integrationButtonClassName(variant), className])}
+      {...props}
+    />
+  );
+}
+
+export function IntegrationPageLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-linear-to-b from-white via-stone-50/20 to-white p-6">
+      <div className="flex w-full max-w-md flex-col gap-8 text-center">
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/routes/_view/app/-integrations-connect-flow.tsx b/apps/web/src/routes/_view/app/-integrations-connect-flow.tsx
index 0ea59bf4a8..97e2ba3250 100644
--- a/apps/web/src/routes/_view/app/-integrations-connect-flow.tsx
+++ b/apps/web/src/routes/_view/app/-integrations-connect-flow.tsx
@@ -1,189 +1,234 @@
 import Nango from "@nangohq/frontend";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
-import { createConnectSession, createReconnectSession } from "@hypr/api-client";
-import { createClient } from "@hypr/api-client/client";
-import { cn } from "@hypr/utils";
+import {
+  createConnectSession,
+  createReconnectSession,
+  listConnections,
+} from "@hypr/api-client";
 
-import { env } from "@/env";
-import { getAccessToken } from "@/functions/access-token";
+import { type ApiClient, useApiClient } from "@/hooks/use-api-client";
 
+import { IntegrationButton, IntegrationPageLayout } from "./-integration-ui";
 import { getIntegrationDisplay, Route } from "./integration";
 
+async function waitForConnection(
+  client: ApiClient,
+  integrationId: string,
+  expectedConnectionId?: string,
+): Promise<void> {
+  for (let attempt = 0; attempt < 12; attempt++) {
+    const { data, error } = await listConnections({ client });
+    if (!error) {
+      const connection = (data?.connections ?? []).find(
+        (item) => item.integration_id === integrationId,
+      );
+
+      if (
+        connection &&
+        (!expectedConnectionId ||
+          connection.connection_id === expectedConnectionId)
+      ) {
+        return;
+      }
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  }
+}
+
 export function ConnectFlow() {
   const search = Route.useSearch();
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { getClient } = useApiClient();
   const [nango] = useState(() => new Nango());
-  const [status, setStatus] = useState<
-    "idle" | "loading" | "connecting" | "success" | "error"
-  >("idle");
-  const statusRef = useRef(status);
-  const inFlightRef = useRef(false);
-
-  useEffect(() => {
-    statusRef.current = status;
-  }, [status]);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const autoConnectTriggeredRef = useRef(false);
 
   const display = getIntegrationDisplay(search.integration_id);
 
-  const handleConnect = async () => {
-    if (inFlightRef.current) return;
-    inFlightRef.current = true;
-    setStatus("loading");
-
-    let sessionToken: string;
-
-    try {
-      const token = await getAccessToken();
-      const apiClient = createClient({
-        baseUrl: env.VITE_API_URL,
-        headers: { Authorization: `Bearer ${token}` },
-      });
+  const {
+    mutateAsync: createSession,
+    reset: resetCreateSession,
+    isPending: isLoading,
+    isError: isCreateSessionError,
+  } = useMutation({
+    mutationFn: async () => {
+      const client = await getClient();
 
       if (search.connection_id) {
         const { data, error } = await createReconnectSession({
-          client: apiClient,
+          client,
           body: {
             connection_id: search.connection_id,
             integration_id: search.integration_id,
           },
         });
+
         if (error || !data) {
-          inFlightRef.current = false;
-          setStatus("error");
-          return;
-        }
-        sessionToken = data.token;
-      } else {
-        const { data, error } = await createConnectSession({
-          client: apiClient,
-          body: { allowed_integrations: [search.integration_id] },
-        });
-        if (error || !data) {
-          inFlightRef.current = false;
-          setStatus("error");
-          return;
+          throw new Error("Failed to create reconnect session");
         }
-        sessionToken = data.token;
+
+        return { sessionToken: data.token, client };
       }
+
+      const { data, error } = await createConnectSession({
+        client,
+        body: { allowed_integrations: [search.integration_id] },
+      });
+
+      if (error || !data) {
+        throw new Error("Failed to create connect session");
+      }
+
+      return { sessionToken: data.token, client };
+    },
+  });
+
+  const handleConnect = useCallback(async () => {
+    if (isLoading || isConnecting) {
+      return;
+    }
+
+    resetCreateSession();
+
+    let sessionToken: string;
+    let apiClient: ApiClient;
+
+    try {
+      const result = await createSession();
+      sessionToken = result.sessionToken;
+      apiClient = result.client;
     } catch {
-      inFlightRef.current = false;
-      setStatus("error");
       return;
     }
 
-    setStatus("connecting");
+    setIsConnecting(true);
+    let didComplete = false;
 
     const connect = nango.openConnectUI({
       onEvent: (event) => {
-        if (event.type === "close") {
-          if (
-            statusRef.current !== "success" &&
-            statusRef.current !== "error"
-          ) {
-            inFlightRef.current = false;
-            statusRef.current = "idle";
-            setStatus("idle");
-          }
-        } else if (event.type === "connect") {
-          inFlightRef.current = false;
-          statusRef.current = "success";
-          setStatus("success");
-          void navigate({
-            to: "/callback/integration/",
-            search: {
-              integration_id: search.integration_id,
-              status: "success",
-              flow: search.flow,
-              scheme: search.scheme,
-              return_to: search.return_to,
-            },
-          });
+        if (event.type === "close" && !didComplete) {
+          setIsConnecting(false);
+        }
+
+        if (event.type === "connect") {
+          void (async () => {
+            try {
+              const eventPayload = event.payload as
+                | { connectionId?: string }
+                | undefined;
+
+              await waitForConnection(
+                apiClient,
+                search.integration_id,
+                eventPayload?.connectionId,
+              );
+
+              didComplete = true;
+
+              await queryClient.invalidateQueries({
+                queryKey: ["integration-status"],
+              });
+
+              await navigate({
+                to: "/callback/integration/",
+                search: {
+                  integration_id: search.integration_id,
+                  status: "success",
+                  flow: search.flow,
+                  scheme: search.scheme,
+                  return_to: search.return_to,
+                },
+              });
+            } catch {
+              setIsConnecting(false);
+            }
+          })();
         }
       },
     });
 
     connect.setSessionToken(sessionToken);
-  };
+  }, [
+    createSession,
+    isConnecting,
+    isLoading,
+    nango,
+    navigate,
+    queryClient,
+    resetCreateSession,
+    search.connection_id,
+    search.flow,
+    search.integration_id,
+    search.return_to,
+    search.scheme,
+  ]);
 
   useEffect(() => {
-    if (search.flow === "desktop") {
-      void handleConnect();
+    if (search.flow !== "desktop" || autoConnectTriggeredRef.current) {
+      return;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
-  const isLoading = status === "loading";
-  const isConnecting = status === "connecting";
+    autoConnectTriggeredRef.current = true;
+
+    if (!isLoading && !isConnecting) {
+      void handleConnect();
+    }
+  }, [handleConnect, isConnecting, isLoading, search.flow]);
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-linear-to-b from-white via-stone-50/20 to-white p-6">
-      <div className="flex w-full max-w-md flex-col gap-8 text-center">
-        <div className="flex flex-col gap-3">
-          <h1 className="font-serif text-3xl tracking-tight text-stone-700">
-            Connect {display.name}
-          </h1>
-          <p className="text-neutral-600">
-            {isConnecting ? display.connectingHint : display.description}
-          </p>
-        </div>
+    <IntegrationPageLayout>
+      <div className="flex flex-col gap-3">
+        <h1 className="font-serif text-3xl tracking-tight text-stone-700">
+          Connect {display.name}
+        </h1>
+        <p className="text-neutral-600">
+          {isConnecting ? display.connectingHint : display.description}
+        </p>
+      </div>
 
-        {(status === "idle" || isLoading) && (
-          <button
-            onClick={handleConnect}
-            disabled={isLoading}
-            className={cn([
-              "flex h-12 w-full items-center justify-center gap-2 rounded-full text-base font-medium shadow-md transition-all",
-              "bg-linear-to-t from-stone-600 to-stone-500 text-white",
-              isLoading
-                ? "cursor-not-allowed opacity-70"
-                : "cursor-pointer hover:scale-[102%] hover:shadow-lg active:scale-[98%]",
-            ])}
-          >
-            {isLoading && (
-              <svg
-                className="h-4 w-4 animate-spin text-white"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                />
-              </svg>
-            )}
-            {isLoading ? "Connecting…" : `Connect ${display.name}`}
-          </button>
-        )}
-
-        {status === "error" && (
-          <div className="flex flex-col gap-4">
-            <p className="text-red-600">
-              Something went wrong. Please try again.
-            </p>
-            <button
-              onClick={handleConnect}
-              className={cn([
-                "flex h-12 w-full cursor-pointer items-center justify-center text-base font-medium transition-all",
-                "rounded-full bg-linear-to-t from-stone-600 to-stone-500 text-white shadow-md hover:scale-[102%] hover:shadow-lg active:scale-[98%]",
-              ])}
+      {!isConnecting && !isCreateSessionError && (
+        <IntegrationButton onClick={handleConnect} disabled={isLoading}>
+          {isLoading && (
+            <svg
+              className="h-4 w-4 animate-spin text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
             >
-              Try again
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+              />
+            </svg>
+          )}
+          {isLoading ? "Connecting..." : `Connect ${display.name}`}
+        </IntegrationButton>
+      )}
+
+      {isCreateSessionError && !isConnecting && (
+        <div className="flex flex-col gap-4">
+          <p className="text-red-600">
+            Something went wrong. Please try again.
+          </p>
+          <IntegrationButton onClick={handleConnect}>
+            Try again
+          </IntegrationButton>
+        </div>
+      )}
+    </IntegrationPageLayout>
   );
 }
diff --git a/apps/web/src/routes/_view/app/-integrations-disconnect-flow.tsx b/apps/web/src/routes/_view/app/-integrations-disconnect-flow.tsx
index 6b14be2beb..e569eb2e6f 100644
--- a/apps/web/src/routes/_view/app/-integrations-disconnect-flow.tsx
+++ b/apps/web/src/routes/_view/app/-integrations-disconnect-flow.tsx
@@ -1,38 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
 
 import { deleteConnection } from "@hypr/api-client";
-import { createClient } from "@hypr/api-client/client";
-import { cn } from "@hypr/utils";
 
-import { env } from "@/env";
-import { getAccessToken } from "@/functions/access-token";
+import { useApiClient } from "@/hooks/use-api-client";
 
+import { IntegrationButton, IntegrationPageLayout } from "./-integration-ui";
 import { getIntegrationDisplay, Route } from "./integration";
 
 export function DisconnectFlow() {
   const search = Route.useSearch();
   const navigate = useNavigate();
-  const [status, setStatus] = useState<
-    "idle" | "loading" | "success" | "error"
-  >("idle");
+  const queryClient = useQueryClient();
+  const { getClient } = useApiClient();
 
   const display = getIntegrationDisplay(search.integration_id);
 
-  const handleDisconnect = async () => {
-    if (!search.connection_id) {
-      setStatus("error");
-      return;
-    }
-
-    setStatus("loading");
+  const disconnectMutation = useMutation({
+    mutationFn: async () => {
+      if (!search.connection_id) {
+        throw new Error("Missing connection id");
+      }
 
-    try {
-      const token = await getAccessToken();
-      const client = createClient({
-        baseUrl: env.VITE_API_URL,
-        headers: { Authorization: `Bearer ${token}` },
-      });
+      const client = await getClient();
       const { data, error } = await deleteConnection({
         client,
         body: {
@@ -42,72 +32,58 @@ export function DisconnectFlow() {
       });
 
       if (error || !data) {
-        setStatus("error");
-        return;
+        throw new Error("Failed to disconnect integration");
       }
-    } catch {
-      setStatus("error");
-      return;
-    }
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["integration-status"],
+      });
 
-    setStatus("success");
-    void navigate({
-      to: "/callback/integration/",
-      search: {
-        integration_id: search.integration_id,
-        status: "success",
-        flow: search.flow,
-        scheme: search.scheme,
-        return_to: search.return_to,
-      },
-    });
-  };
+      await navigate({
+        to: "/callback/integration/",
+        search: {
+          integration_id: search.integration_id,
+          status: "success",
+          flow: search.flow,
+          scheme: search.scheme,
+          return_to: search.return_to,
+        },
+      });
+    },
+  });
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-linear-to-b from-white via-stone-50/20 to-white p-6">
-      <div className="flex w-full max-w-md flex-col gap-8 text-center">
-        <div className="flex flex-col gap-3">
-          <h1 className="font-serif text-3xl tracking-tight text-stone-700">
-            Disconnect {display.name}
-          </h1>
-          <p className="text-neutral-600">
-            This will stop syncing data from {display.name}.
-          </p>
-        </div>
+    <IntegrationPageLayout>
+      <div className="flex flex-col gap-3">
+        <h1 className="font-serif text-3xl tracking-tight text-stone-700">
+          Disconnect {display.name}
+        </h1>
+        <p className="text-neutral-600">
+          This will stop syncing data from {display.name}.
+        </p>
+      </div>
 
-        {status !== "error" && (
-          <button
-            onClick={handleDisconnect}
-            disabled={status === "loading" || !search.connection_id}
-            className={cn([
-              "flex h-12 w-full items-center justify-center gap-2 rounded-full text-base font-medium shadow-md transition-all",
-              "bg-linear-to-t from-red-600 to-red-500 text-white",
-              status === "loading" || !search.connection_id
-                ? "cursor-not-allowed opacity-70"
-                : "cursor-pointer hover:scale-[102%] hover:shadow-lg active:scale-[98%]",
-            ])}
-          >
-            {status === "loading" ? "Disconnecting..." : "Disconnect"}
-          </button>
-        )}
+      {!disconnectMutation.isError && (
+        <IntegrationButton
+          variant="danger"
+          onClick={() => disconnectMutation.mutate()}
+          disabled={disconnectMutation.isPending || !search.connection_id}
+        >
+          {disconnectMutation.isPending ? "Disconnecting..." : "Disconnect"}
+        </IntegrationButton>
+      )}
 
-        {status === "error" && (
-          <div className="flex flex-col gap-4">
-            <p className="text-red-600">
-              Could not disconnect this integration. Please try again.
-            </p>
-            <button
-              onClick={handleDisconnect}
-              className={cn([
-                "flex h-12 w-full cursor-pointer items-center justify-center text-base font-medium transition-all",
-                "rounded-full bg-linear-to-t from-stone-600 to-stone-500 text-white shadow-md hover:scale-[102%] hover:shadow-lg active:scale-[98%]",
-              ])}
-            >
-              Try again
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
+      {disconnectMutation.isError && (
+        <div className="flex flex-col gap-4">
+          <p className="text-red-600">
+            Could not disconnect this integration. Please try again.
+          </p>
+          <IntegrationButton onClick={() => disconnectMutation.mutate()}>
+            Try again
+          </IntegrationButton>
+        </div>
+      )}
+    </IntegrationPageLayout>
   );
 }
diff --git a/apps/web/src/routes/_view/app/-integrations-upgrade-prompt.tsx b/apps/web/src/routes/_view/app/-integrations-upgrade-prompt.tsx
index f52c3fa2ef..570d5febbc 100644
--- a/apps/web/src/routes/_view/app/-integrations-upgrade-prompt.tsx
+++ b/apps/web/src/routes/_view/app/-integrations-upgrade-prompt.tsx
@@ -1,7 +1,9 @@
 import { Link } from "@tanstack/react-router";
 
-import { cn } from "@hypr/utils";
-
+import {
+  IntegrationPageLayout,
+  integrationButtonClassName,
+} from "./-integration-ui";
 import { getIntegrationDisplay } from "./integration";
 
 export function UpgradePrompt({
@@ -16,53 +18,48 @@ export function UpgradePrompt({
   const display = getIntegrationDisplay(integrationId);
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-linear-to-b from-white via-stone-50/20 to-white p-6">
-      <div className="flex w-full max-w-md flex-col gap-8 text-center">
-        <div className="flex flex-col gap-3">
-          <div className="flex items-center justify-center gap-2">
-            <h1 className="font-serif text-3xl tracking-tight text-stone-700">
-              {display.name}
-            </h1>
-            <span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">
-              Pro
-            </span>
-          </div>
-          <p className="text-neutral-600">
-            Upgrade to Pro to connect {display.name} and other integrations.
-          </p>
+    <IntegrationPageLayout>
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-center gap-2">
+          <h1 className="font-serif text-3xl tracking-tight text-stone-700">
+            {display.name}
+          </h1>
+          <span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">
+            Pro
+          </span>
         </div>
+        <p className="text-neutral-600">
+          Upgrade to Pro to connect {display.name} and other integrations.
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <Link
+          to="/app/checkout/"
+          search={{ period: "monthly" }}
+          className={integrationButtonClassName("primary")}
+        >
+          Upgrade to Pro
+        </Link>
 
-        <div className="flex flex-col gap-3">
+        {flow === "desktop" ? (
+          <button
+            onClick={() => {
+              window.location.href = `${scheme}://integration/callback?integration_id=${integrationId}&status=upgrade_required`;
+            }}
+            className="cursor-pointer text-sm text-neutral-500 transition-colors hover:text-neutral-700"
+          >
+            Back to app
+          </button>
+        ) : (
           <Link
-            to="/app/checkout/"
-            search={{ period: "monthly" }}
-            className={cn([
-              "flex h-12 w-full cursor-pointer items-center justify-center rounded-full text-base font-medium shadow-md transition-all",
-              "bg-linear-to-t from-stone-600 to-stone-500 text-white hover:scale-[102%] hover:shadow-lg active:scale-[98%]",
-            ])}
+            to="/app/account/"
+            className="text-sm text-neutral-500 transition-colors hover:text-neutral-700"
           >
-            Upgrade to Pro
+            Back to account
           </Link>
-
-          {flow === "desktop" ? (
-            <button
-              onClick={() => {
-                window.location.href = `${scheme}://integration/callback?integration_id=${integrationId}&status=upgrade_required`;
-              }}
-              className="cursor-pointer text-sm text-neutral-500 transition-colors hover:text-neutral-700"
-            >
-              Back to app
-            </button>
-          ) : (
-            <Link
-              to="/app/account/"
-              className="text-sm text-neutral-500 transition-colors hover:text-neutral-700"
-            >
-              Back to account
-            </Link>
-          )}
-        </div>
+        )}
       </div>
-    </div>
+    </IntegrationPageLayout>
   );
 }
diff --git a/apps/web/src/routes/_view/app/integration.tsx b/apps/web/src/routes/_view/app/integration.tsx
index 4072833a70..a20c7825d5 100644
--- a/apps/web/src/routes/_view/app/integration.tsx
+++ b/apps/web/src/routes/_view/app/integration.tsx
@@ -1,8 +1,10 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
 
 import { useBilling } from "@/hooks/use-billing";
 
+import { IntegrationPageLayout } from "./-integration-ui";
 import { ConnectFlow } from "./-integrations-connect-flow";
 import { DisconnectFlow } from "./-integrations-disconnect-flow";
 import { UpgradePrompt } from "./-integrations-upgrade-prompt";
@@ -48,21 +50,34 @@ export const Route = createFileRoute("/_view/app/integration")({
 function Component() {
   const search = Route.useSearch();
   const billing = useBilling();
+  const desktopRefreshStartedRef = useRef(false);
+  const [isSyncingDesktopBilling, setIsSyncingDesktopBilling] = useState(false);
 
-  if (search.action === "disconnect") {
-    return <DisconnectFlow />;
-  }
+  useEffect(() => {
+    if (search.flow !== "desktop" || desktopRefreshStartedRef.current) {
+      return;
+    }
+
+    desktopRefreshStartedRef.current = true;
+    setIsSyncingDesktopBilling(true);
+    void billing
+      .refreshBilling()
+      .catch(() => {})
+      .finally(() => setIsSyncingDesktopBilling(false));
+  }, [billing.refreshBilling, search.flow]);
 
-  if (!billing.isReady) {
+  if (!billing.isReady || isSyncingDesktopBilling) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-linear-to-b from-white via-stone-50/20 to-white p-6">
-        <div className="w-full max-w-md text-center">
-          <p className="text-neutral-500">Loading...</p>
-        </div>
-      </div>
+      <IntegrationPageLayout>
+        <p className="text-neutral-500">Loading...</p>
+      </IntegrationPageLayout>
     );
   }
 
+  if (search.action === "disconnect") {
+    return <DisconnectFlow />;
+  }
+
   if (!billing.isPro) {
     return (
       <UpgradePrompt