add support for deny/expired status

Author: sylwang-stripe

packages/cli/src/commands/spend-request/create.tsx

@@ -80,7 +80,7 @@ export const CreateSpendRequest: React.FC<CreateSpendRequestProps> = ({
         setApprovalUrl(approval.approval_link);
         setStatus('waiting');
 
-        const { approved } = await server.waitForCallback();
+        const { status: callbackStatus } = await server.waitForCallback();
         if (cancelled) return;
 
         const final = await repository.retrieve(result.id);
@@ -93,7 +93,7 @@ export const CreateSpendRequest: React.FC<CreateSpendRequestProps> = ({
           return;
         }
 
-        if (approved && final.status === 'approved') {
+        if (callbackStatus === 'approved') {
           setRequest(final);
           setStatus('success');
           setTimeout(() => onComplete(final), DISPLAY_DELAY_MS);

packages/cli/src/commands/spend-request/request-approval.tsx

@@ -20,7 +20,7 @@ export const RequestApproval: React.FC<RequestApprovalProps> = ({
   onComplete,
 }) => {
   const [status, setStatus] = useState<
-    'requesting' | 'waiting' | 'success' | 'error'
+    'requesting' | 'waiting' | 'success' | 'denied' | 'expired' | 'error'
   >('requesting');
   const [approvalUrl, setApprovalUrl] = useState<string>('');
   const [result, setResult] = useState<SpendRequest | null>(null);
@@ -50,7 +50,7 @@ export const RequestApproval: React.FC<RequestApprovalProps> = ({
         setApprovalUrl(res.approval_link);
         setStatus('waiting');
 
-        const { approved } = await server.waitForCallback();
+        const { status: callbackStatus } = await server.waitForCallback();
         if (cancelled) return;
 
         const final = await repository.retrieve(id);
@@ -62,14 +62,20 @@ export const RequestApproval: React.FC<RequestApprovalProps> = ({
           return;
         }
 
-        if (approved && final.status === 'approved') {
+        if (callbackStatus === 'approved') {
           setResult(final);
           setStatus('success');
           setTimeout(() => onComplete(final), DISPLAY_DELAY_MS);
+        } else if (callbackStatus === 'denied') {
+          setResult(final);
+          setStatus('denied');
+          setTimeout(() => onComplete(final), DISPLAY_DELAY_MS);
+        } else if (callbackStatus === 'expired') {
+          setResult(final);
+          setStatus('expired');
+          setTimeout(() => onComplete(final), DISPLAY_DELAY_MS);
         } else {
-          setError(
-            `Spend request did not reach approved (status: ${final.status})`,
-          );
+          setError('An error occurred during approval');
           setStatus('error');
           setTimeout(() => onComplete(final), DISPLAY_DELAY_MS);
         }
@@ -109,6 +115,38 @@ export const RequestApproval: React.FC<RequestApprovalProps> = ({
     );
   }
 
+  if (status === 'denied') {
+    return (
+      <Box flexDirection="column">
+        <Text color="red">✗ Spend request denied</Text>
+        <Box flexDirection="column" marginTop={1} paddingX={2}>
+          <Text>
+            ID: <Text bold>{result?.id}</Text>
+          </Text>
+          <Text>
+            Status: <Text bold color="red">{result?.status}</Text>
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (status === 'expired') {
+    return (
+      <Box flexDirection="column">
+        <Text color="yellow">✗ Spend request expired</Text>
+        <Box flexDirection="column" marginTop={1} paddingX={2}>
+          <Text>
+            ID: <Text bold>{result?.id}</Text>
+          </Text>
+          <Text>
+            Status: <Text bold>{result?.status}</Text>
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
   if (status === 'success') {
     return (
       <Box flexDirection="column">

packages/cli/src/utils/local-callback-server.ts

@@ -1,8 +1,10 @@
 import { createServer } from 'node:http';
 import type { AddressInfo } from 'node:net';
 
+export type CallbackStatus = 'approved' | 'denied' | 'expired' | 'error';
+
 export interface CallbackResult {
-  approved: boolean;
+  status: CallbackStatus;
 }
 
 export interface CallbackServer {
@@ -11,6 +13,19 @@ export interface CallbackServer {
   close: () => void;
 }
 
+const VALID_STATUSES: ReadonlySet<string> = new Set([
+  'approved',
+  'denied',
+  'expired',
+  'error',
+]);
+
+const STATUS_MESSAGES: Record<string, string> = {
+  approved: 'Spend request approved. You can close this tab.',
+  denied: 'Spend request denied. You can close this tab.',
+  expired: 'Spend request expired. You can close this tab.',
+};
+
 export function startCallbackServer(): Promise<CallbackServer> {
   return new Promise((resolve, reject) => {
     let resolveCallback: ((result: CallbackResult) => void) | undefined;
@@ -20,9 +35,15 @@ export function startCallbackServer(): Promise<CallbackServer> {
 
     const server = createServer((req, res) => {
       const url = new URL(req.url ?? '/', 'http://localhost');
-      const approved = url.searchParams.get('status') === 'approved';
-      res.writeHead(200).end();
-      resolveCallback?.({ approved });
+      const raw = url.searchParams.get('status') ?? '';
+      const status: CallbackStatus = VALID_STATUSES.has(raw)
+        ? (raw as CallbackStatus)
+        : 'error';
+      const message =
+        STATUS_MESSAGES[raw] ?? 'Something went wrong. You can close this tab.';
+      res.writeHead(200, { 'Content-Type': 'text/html' });
+      res.end(`<html><body><p>${message}</p></body></html>`);
+      resolveCallback?.({ status });
     });
 
     server.listen(0, '127.0.0.1', () => {