adserver-dashboard 1.0.0

package/client/src/components/deals/reopen-deal-sheet.tsx

@@ -0,0 +1,191 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+} from '@moving-walls/design-system';
+import { Button } from '@moving-walls/design-system';
+import { Textarea } from '@moving-walls/design-system';
+import { useReopenDeal, ReopenDealResponse } from '@/hooks/use-approval';
+import { useToast } from '@/hooks/use-toast';
+import { Loader2, RotateCcw, AlertCircle } from 'lucide-react';
+
+interface ReopenDealSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dealId: string;
+  dealName?: string;
+  currentStatus?: string;
+  onSuccess?: (response: ReopenDealResponse) => void;
+}
+
+const ALLOWED_STATUSES = ['APPROVED', 'LIVE', 'COMPLETED', 'EXPIRED', 'REJECTED', 'ARCHIVED'];
+
+export function ReopenDealSheet({
+  open,
+  onOpenChange,
+  dealId,
+  dealName,
+  currentStatus,
+  onSuccess,
+}: ReopenDealSheetProps) {
+  const { toast } = useToast();
+  const [reason, setReason] = useState('');
+  const prevOpenRef = useRef(false);
+
+  const reopenMutation = useReopenDeal(dealId);
+
+  useEffect(() => {
+    if (open && !prevOpenRef.current) {
+      setReason('');
+    }
+    prevOpenRef.current = open;
+  }, [open]);
+
+  const handleSubmit = () => {
+    reopenMutation.mutate(
+      { reason: reason.trim() || undefined },
+      {
+        onSuccess: (response) => {
+          const cascadedCount = response.cascadedLineItems?.length || 0;
+          const skippedCount = response.skippedLineItems?.length || 0;
+          
+          let description = 'Deal has been reopened and is now editable.';
+          if (cascadedCount > 0) {
+            description += ` ${cascadedCount} line item(s) moved to PENDING status.`;
+          }
+          if (skippedCount > 0) {
+            description += ` ${skippedCount} archived line item(s) were skipped.`;
+          }
+
+          toast({
+            title: 'Deal Reopened',
+            description,
+            className: 'bg-emerald-500 text-white',
+          });
+          onOpenChange(false);
+          onSuccess?.(response);
+        },
+        onError: (error: Error) => {
+          toast({
+            title: 'Reopen Failed',
+            description: error.message || 'Failed to reopen deal',
+            variant: 'destructive',
+          });
+        },
+      }
+    );
+  };
+
+  const isStatusAllowed = !currentStatus || ALLOWED_STATUSES.includes(currentStatus.toUpperCase());
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full sm:max-w-md">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            <RotateCcw className="h-5 w-5" />
+            Reopen Deal
+          </SheetTitle>
+          <SheetDescription>
+            Reopening this deal will allow further edits and modifications.
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-hidden py-4">
+          <div className="space-y-4 px-6">
+            {dealName && (
+              <div className="p-3 rounded-md border border-mw-gray-200 dark:border-mw-gray-700 bg-mw-gray-50 dark:bg-mw-gray-800">
+                <p className="text-sm font-medium text-mw-gray-900 dark:text-white">
+                  {dealName}
+                </p>
+                {currentStatus && (
+                  <p className="text-xs text-mw-gray-500 mt-1">
+                    Current Status: {currentStatus}
+                  </p>
+                )}
+              </div>
+            )}
+
+            <div className="p-3 rounded-md border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/20">
+              <div className="flex items-start gap-2">
+                <AlertCircle className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
+                <div className="text-sm text-amber-700 dark:text-amber-400">
+                  <p className="font-medium mb-1">What happens when you reopen:</p>
+                  <ul className="list-disc list-inside space-y-1 text-xs">
+                    <li>Deal status will change to REOPENED</li>
+                    <li>All non-archived line items will move to PENDING status</li>
+                    <li>Archived line items will remain unchanged</li>
+                    <li>You can make edits and request approval again</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            {!isStatusAllowed && (
+              <div className="p-3 rounded-md border border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/20">
+                <div className="flex items-start gap-2">
+                  <AlertCircle className="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
+                  <p className="text-sm text-red-700 dark:text-red-400">
+                    This deal cannot be reopened from its current status ({currentStatus}).
+                    Allowed statuses: {ALLOWED_STATUSES.join(', ')}
+                  </p>
+                </div>
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-mw-gray-700 dark:text-mw-gray-300">
+                Reason for reopening (optional)
+              </label>
+              <Textarea
+                placeholder="e.g., Client requested changes to line items, Need to update inventory selection..."
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+                rows={3}
+                className="resize-none"
+                data-testid="input-reason"
+              />
+              <p className="text-xs text-mw-gray-500">
+                This reason will be recorded in the deal history.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <SheetFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            data-testid="button-cancel"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            variant="primary"
+            onClick={handleSubmit}
+            disabled={reopenMutation.isPending || !isStatusAllowed}
+            data-testid="button-submit"
+          >
+            {reopenMutation.isPending ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Reopening...
+              </>
+            ) : (
+              <>
+                <RotateCcw className="h-4 w-4 mr-2" />
+                Reopen Deal
+              </>
+            )}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/client/src/components/deals/request-approval-sheet.test.tsx

@@ -0,0 +1,323 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import React from 'react';
+import { render, screen, waitFor, cleanup, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const mockMutate = vi.fn();
+const mockToast = vi.fn();
+const consoleErrorSpy = vi.spyOn(console, 'error');
+
+vi.mock('@/hooks/use-approval', () => ({
+  useRequestApproval: vi.fn(() => ({
+    mutate: mockMutate,
+    isPending: false,
+  })),
+}));
+
+vi.mock('@/hooks/use-toast', () => ({
+  useToast: () => ({
+    toast: mockToast,
+  }),
+}));
+
+vi.mock('@moving-walls/design-system', async () => {
+  const React = await import('react');
+  return {
+    Sheet: (props: any) => props.open ? React.createElement('div', { 'data-testid': 'sheet' }, props.children) : null,
+    SheetContent: (props: any) => React.createElement('div', { 'data-testid': 'sheet-content' }, props.children),
+    SheetHeader: (props: any) => React.createElement('div', { 'data-testid': 'sheet-header' }, props.children),
+    SheetTitle: (props: any) => React.createElement('h2', { 'data-testid': 'sheet-title' }, props.children),
+    SheetDescription: (props: any) => React.createElement('p', { 'data-testid': 'sheet-description' }, props.children),
+    SheetFooter: (props: any) => React.createElement('div', { 'data-testid': 'sheet-footer' }, props.children),
+    Button: (props: any) => React.createElement('button', {
+      onClick: props.onClick,
+      disabled: props.disabled,
+      'data-testid': props['data-testid'],
+      className: props.className,
+    }, props.children),
+    ScrollArea: (props: any) => React.createElement('div', null, props.children),
+    cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
+  };
+});
+
+vi.mock('lucide-react', async () => {
+  const React = await import('react');
+  return {
+    Mail: () => React.createElement('span', null, 'M'),
+    Loader2: () => React.createElement('span', { 'data-testid': 'loader' }, 'Loading...'),
+  };
+});
+
+import { RequestApprovalSheet } from './request-approval-sheet';
+import { useRequestApproval } from '@/hooks/use-approval';
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: 0 } },
+  });
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    return React.createElement(QueryClientProvider, { client: queryClient }, children);
+  };
+}
+
+describe('RequestApprovalSheet', () => {
+  const defaultProps = {
+    open: true,
+    onOpenChange: vi.fn(),
+    dealId: 'deal-123',
+  };
+
+  beforeEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    consoleErrorSpy.mockClear();
+    vi.mocked(useRequestApproval).mockReturnValue({
+      mutate: mockMutate,
+      isPending: false,
+    } as any);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('Basic Rendering', () => {
+    it('should render when open is true', () => {
+      render(React.createElement(RequestApprovalSheet, defaultProps), { wrapper: createWrapper() });
+
+      expect(screen.getByTestId('sheet')).toBeInTheDocument();
+      expect(screen.getByTestId('sheet-title')).toHaveTextContent('Request Approval');
+    });
+
+    it('should not render content when open is false', () => {
+      render(React.createElement(RequestApprovalSheet, { ...defaultProps, open: false }), { wrapper: createWrapper() });
+
+      expect(screen.queryByTestId('sheet')).not.toBeInTheDocument();
+    });
+
+    it('should display existing approval emails if provided', () => {
+      const existingEmails = ['test1@example.com', 'test2@example.com'];
+      render(React.createElement(RequestApprovalSheet, { ...defaultProps, existingEmails }), {
+        wrapper: createWrapper(),
+      });
+
+      expect(screen.getByTestId('email-item-test1@example.com')).toBeInTheDocument();
+      expect(screen.getByTestId('email-item-test2@example.com')).toBeInTheDocument();
+    });
+
+    it('should show empty state when no emails configured', () => {
+      render(React.createElement(RequestApprovalSheet, defaultProps), { wrapper: createWrapper() });
+
+      expect(screen.getByText('No approvers configured')).toBeInTheDocument();
+    });
+  });
+
+  describe('Form Submission', () => {
+    it('should enable submit button for auto-approval when no emails configured', () => {
+      render(React.createElement(RequestApprovalSheet, defaultProps), { wrapper: createWrapper() });
+
+      const submitButton = screen.getByTestId('button-submit');
+      expect(submitButton).not.toBeDisabled();
+      expect(submitButton).toHaveTextContent('Auto-approve');
+    });
+
+    it('should enable submit when emails are provided', () => {
+      render(React.createElement(RequestApprovalSheet, { ...defaultProps, existingEmails: ['test@example.com'] }), {
+        wrapper: createWrapper(),
+      });
+
+      const submitButton = screen.getByTestId('button-submit');
+      expect(submitButton).not.toBeDisabled();
+    });
+
+    it('should show loading state during submission', () => {
+      vi.mocked(useRequestApproval).mockReturnValue({
+        mutate: mockMutate,
+        isPending: true,
+      } as any);
+
+      const existingEmails = ['test@example.com'];
+      render(React.createElement(RequestApprovalSheet, { ...defaultProps, existingEmails }), {
+        wrapper: createWrapper(),
+      });
+
+      const submitButton = screen.getByTestId('button-submit');
+      expect(submitButton).toBeDisabled();
+      expect(screen.getByTestId('loader')).toBeInTheDocument();
+    });
+
+    it('should call mutation on submit', async () => {
+      const user = userEvent.setup();
+      const existingEmails = ['test1@example.com', 'test2@example.com'];
+
+      render(React.createElement(RequestApprovalSheet, { ...defaultProps, existingEmails }), {
+        wrapper: createWrapper(),
+      });
+
+      await user.click(screen.getByTestId('button-submit'));
+
+      expect(mockMutate).toHaveBeenCalledWith(
+        expect.objectContaining({ frontendUrl: expect.any(String) }),
+        expect.any(Object)
+      );
+    });
+
+    it('should call onOpenChange(false) on successful submission', async () => {
+      const user = userEvent.setup();
+      const onOpenChange = vi.fn();
+
+      mockMutate.mockImplementation((_, options) => {
+        options.onSuccess();
+      });
+
+      render(
+        React.createElement(RequestApprovalSheet, {
+          ...defaultProps,
+          onOpenChange,
+          existingEmails: ['test@example.com'],
+        }),
+        { wrapper: createWrapper() }
+      );
+
+      const submitButton = screen.getByTestId('button-submit');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(onOpenChange).toHaveBeenCalledWith(false);
+      });
+    });
+
+    it('should show success toast on successful submission', async () => {
+      const user = userEvent.setup();
+
+      mockMutate.mockImplementation((_, options) => {
+        options.onSuccess();
+      });
+
+      render(React.createElement(RequestApprovalSheet, { ...defaultProps, existingEmails: ['test@example.com'] }), {
+        wrapper: createWrapper(),
+      });
+
+      const submitButton = screen.getByTestId('button-submit');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockToast).toHaveBeenCalledWith(
+          expect.objectContaining({ title: 'Approval request sent' })
+        );
+      });
+    });
+
+    it('should show error toast on failed submission', async () => {
+      const user = userEvent.setup();
+
+      mockMutate.mockImplementation((_, options) => {
+        options.onError(new Error('Network error'));
+      });
+
+      render(React.createElement(RequestApprovalSheet, { ...defaultProps, existingEmails: ['test@example.com'] }), {
+        wrapper: createWrapper(),
+      });
+
+      const submitButton = screen.getByTestId('button-submit');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(mockToast).toHaveBeenCalledWith(
+          expect.objectContaining({ title: 'Request failed', variant: 'destructive' })
+        );
+      });
+    });
+  });
+
+  describe('Cancel Action', () => {
+    it('should close sheet when cancel button is clicked', async () => {
+      const user = userEvent.setup();
+      const onOpenChange = vi.fn();
+
+      render(React.createElement(RequestApprovalSheet, { ...defaultProps, onOpenChange }), {
+        wrapper: createWrapper(),
+      });
+
+      const cancelButton = screen.getByTestId('button-cancel');
+      await user.click(cancelButton);
+
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty array existingEmails', () => {
+      render(
+        React.createElement(RequestApprovalSheet, { ...defaultProps, existingEmails: [] }),
+        { wrapper: createWrapper() }
+      );
+
+      expect(screen.getByText('No approvers configured')).toBeInTheDocument();
+    });
+
+    it('should handle null existingEmails', async () => {
+      render(
+        React.createElement(RequestApprovalSheet, {
+          open: true,
+          onOpenChange: vi.fn(),
+          dealId: 'deal-123',
+          existingEmails: null as any,
+        }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 100));
+      });
+
+      const maxUpdateErrors = consoleErrorSpy.mock.calls.filter(
+        call => call.some(arg => 
+          typeof arg === 'string' && arg.includes('Maximum update depth exceeded')
+        )
+      );
+      expect(maxUpdateErrors.length).toBe(0);
+      expect(screen.getByTestId('sheet')).toBeInTheDocument();
+    });
+
+    it('should handle undefined existingEmails', async () => {
+      render(
+        React.createElement(RequestApprovalSheet, {
+          open: true,
+          onOpenChange: vi.fn(),
+          dealId: 'deal-123',
+        }),
+        { wrapper: createWrapper() }
+      );
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 100));
+      });
+
+      expect(screen.getByTestId('sheet')).toBeInTheDocument();
+      expect(screen.getByText('No approvers configured')).toBeInTheDocument();
+    });
+
+    it('should handle large number of emails', async () => {
+      const emails = Array.from({ length: 20 }, (_, i) => `user${i}@example.com`);
+
+      render(React.createElement(RequestApprovalSheet, { ...defaultProps, existingEmails: emails }), {
+        wrapper: createWrapper(),
+      });
+
+      emails.forEach(email => {
+        expect(screen.getByTestId(`email-item-${email}`)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper button labels', () => {
+      render(React.createElement(RequestApprovalSheet, defaultProps), { wrapper: createWrapper() });
+
+      expect(screen.getByTestId('button-submit')).toBeInTheDocument();
+      expect(screen.getByTestId('button-cancel')).toBeInTheDocument();
+    });
+  });
+});

package/client/src/components/deals/request-approval-sheet.tsx

@@ -0,0 +1,136 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+} from '@moving-walls/design-system';
+import { Button } from '@moving-walls/design-system';
+import { ScrollArea } from '@moving-walls/design-system';
+import { useRequestApproval } from '@/hooks/use-approval';
+import { useToast } from '@/hooks/use-toast';
+import { Mail, Loader2 } from 'lucide-react';
+
+interface RequestApprovalSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dealId: string;
+  existingEmails?: string[];
+}
+
+export function RequestApprovalSheet({
+  open,
+  onOpenChange,
+  dealId,
+  existingEmails,
+}: RequestApprovalSheetProps) {
+  const { toast } = useToast();
+  const requestApprovalMutation = useRequestApproval(dealId);
+  
+  const emails = existingEmails ?? [];
+
+  const handleSubmit = () => {
+    const frontendUrl = `${import.meta.env.VITE_INFLUENCE_URL || window.location.origin}/approval`;
+
+    requestApprovalMutation.mutate(
+      { 
+        frontendUrl,
+      },
+      {
+        onSuccess: () => {
+          toast({
+            title: 'Approval request sent',
+            description: `Approval request sent to ${emails.length} approver(s)`,
+            className: 'bg-emerald-500 text-white',
+          });
+          onOpenChange(false);
+        },
+        onError: (error: Error) => {
+          toast({
+            title: 'Request failed',
+            description: error.message || 'Failed to send approval request',
+            variant: 'destructive',
+          });
+        },
+      }
+    );
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full sm:max-w-md">
+        <SheetHeader>
+          <SheetTitle>Request Approval</SheetTitle>
+          <SheetDescription>
+            Send approval requests to the configured approvers
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-hidden py-4">
+          <div className="space-y-4 px-6">
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium text-mw-gray-700 dark:text-mw-gray-300">
+                Approvers ({emails.length})
+              </h4>
+              
+              {emails.length === 0 ? (
+                <div className="flex items-center justify-center py-8 text-mw-gray-500 dark:text-mw-gray-400">
+                  <div className="text-center">
+                    <Mail className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                    <p className="text-sm">No approvers configured</p>
+                    <p className="text-xs mt-1 text-emerald-600 dark:text-emerald-400">Deal will be auto-approved</p>
+                  </div>
+                </div>
+              ) : (
+                <ScrollArea className="max-h-[300px]">
+                  <div className="space-y-2" data-testid="email-list">
+                    {emails.map((email) => (
+                      <div
+                        key={email}
+                        className="flex items-center p-3 rounded-md border border-mw-gray-200 dark:border-mw-gray-700 bg-mw-gray-50 dark:bg-mw-gray-800"
+                        data-testid={`email-item-${email}`}
+                      >
+                        <div className="flex items-center gap-2 min-w-0">
+                          <Mail className="h-4 w-4 text-mw-gray-500 flex-shrink-0" />
+                          <span className="text-sm truncate">{email}</span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <SheetFooter>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            data-testid="button-cancel"
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            variant="primary"
+            onClick={handleSubmit}
+            disabled={requestApprovalMutation.isPending}
+            data-testid="button-submit"
+          >
+            {requestApprovalMutation.isPending ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                {emails.length === 0 ? 'Auto-approving...' : 'Sending...'}
+              </>
+            ) : (
+              emails.length === 0 ? 'Auto-approve' : 'Request Approval'
+            )}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}