adserver-dashboard 1.0.0

package/client/src/components/approval/otp-verification.test.tsx

@@ -0,0 +1,337 @@
+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 mockRequestOtpMutate = vi.fn();
+const mockVerifyOtpMutate = vi.fn();
+
+vi.mock('@/hooks/use-approval', () => ({
+  useRequestOtp: vi.fn(() => ({
+    mutate: mockRequestOtpMutate,
+    isPending: false,
+  })),
+  useVerifyOtp: vi.fn(() => ({
+    mutate: mockVerifyOtpMutate,
+    isPending: false,
+  })),
+}));
+
+vi.mock('@moving-walls/design-system', async () => {
+  const React = await import('react');
+  return {
+    Button: (props: any) => React.createElement('button', {
+      onClick: props.onClick,
+      disabled: props.disabled,
+      'data-testid': props['data-testid'],
+      className: props.className,
+    }, props.children),
+    Input: (props: any) => React.createElement('input', {
+      id: props.id,
+      type: props.type,
+      value: props.value,
+      onChange: props.onChange,
+      disabled: props.disabled,
+      placeholder: props.placeholder,
+      maxLength: props.maxLength,
+      'data-testid': props['data-testid'],
+      className: props.className,
+    }),
+    Card: (props: any) => React.createElement('div', { 'data-testid': 'Card', ...props }, props.children),
+    CardContent: (props: any) => React.createElement('div', { 'data-testid': 'CardContent', ...props }, props.children),
+    Label: (props: any) => React.createElement('label', { 'data-testid': 'Label', ...props }, props.children),
+    cn: (...args: unknown[]) => args.filter(Boolean).join(' '),
+  };
+});
+
+vi.mock('lucide-react', async () => {
+  const React = await import('react');
+  const createIcon = (name: string) => {
+    const Icon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+      (props, ref) => React.createElement('svg', { ref, 'data-testid': `icon-${name}`, ...props })
+    );
+    Icon.displayName = name;
+    return Icon;
+  };
+  return {
+    Loader2: () => React.createElement('span', { 'data-testid': 'loader' }, 'Loading...'),
+    Mail: createIcon('mail'),
+    ShieldCheck: createIcon('shield-check'),
+  };
+});
+
+import { OtpVerification } from './otp-verification';
+import { useRequestOtp, useVerifyOtp } 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('OtpVerification', () => {
+  const defaultProps = {
+    token: 'test-token-123',
+    onVerified: vi.fn(),
+  };
+
+  beforeEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    vi.mocked(useRequestOtp).mockReturnValue({
+      mutate: mockRequestOtpMutate,
+      isPending: false,
+    } as any);
+    vi.mocked(useVerifyOtp).mockReturnValue({
+      mutate: mockVerifyOtpMutate,
+      isPending: false,
+    } as any);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should render "Request OTP" button initially', () => {
+    render(React.createElement(OtpVerification, defaultProps), { wrapper: createWrapper() });
+
+    expect(screen.getByTestId('button-request-otp')).toBeInTheDocument();
+    expect(screen.getByTestId('button-request-otp')).toHaveTextContent('Request OTP');
+    expect(screen.queryByTestId('input-otp')).not.toBeInTheDocument();
+  });
+
+  it('should show OTP input after requesting OTP', async () => {
+    mockRequestOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({ success: true, cooldownSeconds: 60 });
+    });
+
+    render(React.createElement(OtpVerification, defaultProps), { wrapper: createWrapper() });
+
+    const requestButton = screen.getByTestId('button-request-otp');
+    await userEvent.click(requestButton);
+
+    expect(screen.getByTestId('input-otp')).toBeInTheDocument();
+    expect(screen.getByTestId('button-verify')).toBeInTheDocument();
+  });
+
+  it('should show cooldown timer after request', async () => {
+    mockRequestOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({ success: true, cooldownSeconds: 60 });
+    });
+
+    render(React.createElement(OtpVerification, defaultProps), { wrapper: createWrapper() });
+
+    const requestButton = screen.getByTestId('button-request-otp');
+    await userEvent.click(requestButton);
+
+    expect(screen.getByTestId('cooldown-timer')).toBeInTheDocument();
+    expect(screen.getByTestId('cooldown-timer')).toHaveTextContent('Resend OTP in 60s');
+  });
+
+  it('should enable Verify button only with 6 digits', async () => {
+    mockRequestOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({ success: true, cooldownSeconds: 60 });
+    });
+
+    render(React.createElement(OtpVerification, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-request-otp'));
+
+    const otpInput = screen.getByTestId('input-otp');
+    const verifyButton = screen.getByTestId('button-verify');
+
+    expect(verifyButton).toBeDisabled();
+
+    await userEvent.type(otpInput, '123456');
+
+    expect(verifyButton).not.toBeDisabled();
+  });
+
+  it('should disable Verify button with less than 6 digits', async () => {
+    mockRequestOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({ success: true, cooldownSeconds: 60 });
+    });
+
+    render(React.createElement(OtpVerification, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-request-otp'));
+
+    const otpInput = screen.getByTestId('input-otp');
+    const verifyButton = screen.getByTestId('button-verify');
+
+    await userEvent.type(otpInput, '12345');
+
+    expect(verifyButton).toBeDisabled();
+  });
+
+  it('should show error message on invalid OTP', async () => {
+    mockRequestOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({ success: true, cooldownSeconds: 60 });
+    });
+
+    mockVerifyOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({
+        verified: false,
+        error: {
+          code: 'INVALID_OTP',
+          message: 'Invalid OTP code',
+          attemptsRemaining: 2,
+        },
+      });
+    });
+
+    render(React.createElement(OtpVerification, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-request-otp'));
+
+    const otpInput = screen.getByTestId('input-otp');
+    await userEvent.type(otpInput, '123456');
+
+    await userEvent.click(screen.getByTestId('button-verify'));
+
+    expect(screen.getByTestId('error-message')).toHaveTextContent('Invalid OTP code');
+  });
+
+  it('should show remaining attempts on failure', async () => {
+    mockRequestOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({ success: true, cooldownSeconds: 60 });
+    });
+
+    mockVerifyOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({
+        verified: false,
+        error: {
+          code: 'INVALID_OTP',
+          message: 'Invalid OTP code',
+          attemptsRemaining: 2,
+        },
+      });
+    });
+
+    render(React.createElement(OtpVerification, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-request-otp'));
+
+    const otpInput = screen.getByTestId('input-otp');
+    await userEvent.type(otpInput, '123456');
+
+    await userEvent.click(screen.getByTestId('button-verify'));
+
+    expect(screen.getByTestId('attempts-remaining')).toHaveTextContent('2 attempts remaining');
+  });
+
+  it('should call onVerified on successful verification', async () => {
+    const onVerified = vi.fn();
+
+    mockRequestOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({ success: true, cooldownSeconds: 60 });
+    });
+
+    mockVerifyOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({ verified: true });
+    });
+
+    render(React.createElement(OtpVerification, { ...defaultProps, onVerified }), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-request-otp'));
+
+    const otpInput = screen.getByTestId('input-otp');
+    await userEvent.type(otpInput, '123456');
+
+    await userEvent.click(screen.getByTestId('button-verify'));
+
+    expect(onVerified).toHaveBeenCalled();
+  });
+
+  it('should disable all inputs when disabled prop is true', async () => {
+    mockRequestOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({ success: true, cooldownSeconds: 60 });
+    });
+
+    const { rerender } = render(
+      React.createElement(OtpVerification, { ...defaultProps, disabled: true }),
+      { wrapper: createWrapper() }
+    );
+
+    expect(screen.getByTestId('button-request-otp')).toBeDisabled();
+
+    vi.mocked(useRequestOtp).mockReturnValue({
+      mutate: mockRequestOtpMutate,
+      isPending: false,
+    } as any);
+
+    rerender(React.createElement(OtpVerification, { ...defaultProps, disabled: false }));
+
+    await userEvent.click(screen.getByTestId('button-request-otp'));
+
+    rerender(React.createElement(OtpVerification, { ...defaultProps, disabled: true }));
+
+    expect(screen.getByTestId('input-otp')).toBeDisabled();
+    expect(screen.getByTestId('button-verify')).toBeDisabled();
+  });
+
+  it('should show loading state when requesting OTP', () => {
+    vi.mocked(useRequestOtp).mockReturnValue({
+      mutate: mockRequestOtpMutate,
+      isPending: true,
+    } as any);
+
+    render(React.createElement(OtpVerification, defaultProps), { wrapper: createWrapper() });
+
+    expect(screen.getByTestId('button-request-otp')).toBeDisabled();
+    expect(screen.getByTestId('loader')).toBeInTheDocument();
+  });
+
+  it('should show error when request OTP fails', async () => {
+    mockRequestOtpMutate.mockImplementation((_, options) => {
+      options.onError(new Error('Failed to send OTP'));
+    });
+
+    render(React.createElement(OtpVerification, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-request-otp'));
+
+    expect(screen.getByTestId('error-message')).toHaveTextContent('Failed to send OTP');
+  });
+
+  it('should only accept numeric input', async () => {
+    mockRequestOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({ success: true, cooldownSeconds: 60 });
+    });
+
+    render(React.createElement(OtpVerification, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-request-otp'));
+
+    const otpInput = screen.getByTestId('input-otp');
+    await userEvent.type(otpInput, 'abc123def456');
+
+    expect(otpInput).toHaveValue('123456');
+  });
+
+  it('should show resend button when cooldown expires', async () => {
+    mockRequestOtpMutate.mockImplementation((_, options) => {
+      options.onSuccess({ success: true, cooldownSeconds: 2 });
+    });
+
+    render(React.createElement(OtpVerification, defaultProps), { wrapper: createWrapper() });
+
+    await userEvent.click(screen.getByTestId('button-request-otp'));
+
+    expect(screen.getByTestId('cooldown-timer')).toBeInTheDocument();
+
+    await act(async () => {
+      vi.advanceTimersByTime(3000);
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('cooldown-timer')).not.toBeInTheDocument();
+      expect(screen.getByTestId('button-resend-otp')).toBeInTheDocument();
+    });
+  });
+});

package/client/src/components/approval/otp-verification.tsx

@@ -0,0 +1,180 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from '@/lib/i18n';
+import { Button } from '@moving-walls/design-system';
+import { Input } from '@moving-walls/design-system';
+import { Loader2, Mail, ShieldCheck } from 'lucide-react';
+import { useRequestOtp, useVerifyOtp } from '@/hooks/use-approval';
+
+interface OtpVerificationProps {
+  token: string;
+  onVerified: () => void;
+  disabled?: boolean;
+}
+
+export function OtpVerification({ token, onVerified, disabled = false }: OtpVerificationProps) {
+  const { t } = useTranslation('approval');
+  const [otpRequested, setOtpRequested] = useState(false);
+  const [otp, setOtp] = useState('');
+  const [cooldown, setCooldown] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [attemptsRemaining, setAttemptsRemaining] = useState<number | null>(null);
+
+  const requestOtp = useRequestOtp();
+  const verifyOtp = useVerifyOtp(token);
+
+  useEffect(() => {
+    if (cooldown <= 0) return;
+    const timer = setInterval(() => {
+      setCooldown((prev) => (prev > 0 ? prev - 1 : 0));
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [cooldown]);
+
+  const handleRequestOtp = useCallback(() => {
+    setError(null);
+    requestOtp.mutate(
+      { token },
+      {
+        onSuccess: (response) => {
+          setOtpRequested(true);
+          setCooldown(response.cooldownSeconds ?? 60);
+        },
+        onError: (err) => {
+          setError(err.message || t('errors.failedToSubmit'));
+        },
+      }
+    );
+  }, [token, requestOtp, t]);
+
+  const handleVerifyOtp = useCallback(() => {
+    setError(null);
+    verifyOtp.mutate(
+      { token, otp },
+      {
+        onSuccess: (response) => {
+          if (response.verified) {
+            onVerified();
+          } else if (response.error) {
+            setError(response.error.message);
+            if (response.error.attemptsRemaining !== undefined) {
+              setAttemptsRemaining(response.error.attemptsRemaining);
+            }
+          }
+        },
+        onError: (err) => {
+          setError(err.message || t('errors.failedToSubmit'));
+        },
+      }
+    );
+  }, [token, otp, verifyOtp, onVerified, t]);
+
+  const handleOtpChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.replace(/\D/g, '').slice(0, 6);
+    setOtp(value);
+    setError(null);
+  };
+
+  const isValidOtp = otp.length === 6;
+
+  if (!otpRequested) {
+    return (
+      <div className="space-y-4" data-testid="otp-verification">
+        <Button
+          onClick={handleRequestOtp}
+          disabled={disabled || requestOtp.isPending}
+          data-testid="button-request-otp"
+          className="w-full"
+        >
+          {requestOtp.isPending ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" data-testid="loader" />
+              {t('otp.sending')}
+            </>
+          ) : (
+            <>
+              <Mail className="mr-2 h-4 w-4" />
+              {t('otp.requestOtp')}
+            </>
+          )}
+        </Button>
+        {error && (
+          <p className="text-sm text-destructive" data-testid="error-message">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4" data-testid="otp-verification">
+      <div className="space-y-2">
+        <label htmlFor="otp-input" className="text-sm font-medium">
+          {t('otp.enter6DigitOtp')}
+        </label>
+        <Input
+          id="otp-input"
+          type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
+          maxLength={6}
+          value={otp}
+          onChange={handleOtpChange}
+          disabled={disabled || verifyOtp.isPending}
+          placeholder="000000"
+          data-testid="input-otp"
+          className="text-center text-lg tracking-widest"
+        />
+      </div>
+
+      {cooldown > 0 && (
+        <p className="text-sm text-muted-foreground" data-testid="cooldown-timer">
+          {t('otp.resendOtpIn', { seconds: cooldown })}
+        </p>
+      )}
+
+      {cooldown === 0 && (
+        <Button
+          variant="ghost"
+          onClick={handleRequestOtp}
+          disabled={disabled || requestOtp.isPending}
+          data-testid="button-resend-otp"
+          size="sm"
+        >
+          {t('otp.resendOtp')}
+        </Button>
+      )}
+
+      {error && (
+        <p className="text-sm text-destructive" data-testid="error-message">
+          {error}
+        </p>
+      )}
+
+      {attemptsRemaining !== null && attemptsRemaining > 0 && (
+        <p className="text-sm text-muted-foreground" data-testid="attempts-remaining">
+          {t('otp.attemptsRemaining', { count: attemptsRemaining })}
+        </p>
+      )}
+
+      <Button
+        onClick={handleVerifyOtp}
+        disabled={disabled || !isValidOtp || verifyOtp.isPending}
+        data-testid="button-verify"
+        className="w-full"
+      >
+        {verifyOtp.isPending ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" data-testid="verify-loader" />
+            {t('otp.verifying')}
+          </>
+        ) : (
+          <>
+            <ShieldCheck className="mr-2 h-4 w-4" />
+            {t('otp.verify')}
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}