@incodetech/web 2.0.0-alpha.1 → 2.0.0-alpha.11

package/src/email/email.test.tsx

@@ -1,368 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/preact';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { Email } from './email';
-
-// Mock the email manager
-const mockManager = {
-  load: vi.fn(),
-  setEmail: vi.fn(),
-  submit: vi.fn(),
-  submitOtp: vi.fn(),
-  resendOtp: vi.fn(),
-  back: vi.fn(),
-  reset: vi.fn(),
-  getState: vi.fn(),
-  subscribe: vi.fn(),
-  stop: vi.fn(),
-};
-
-vi.mock('@incodetech/core/email', () => ({
-  createEmailManager: vi.fn(() => mockManager),
-}));
-
-// Mock state type for testing different states
-type MockState = {
-  status: string;
-  resendTimer?: number;
-  canResend?: boolean;
-  error?: string;
-  prefilledEmail?: string;
-  emailError?: string;
-};
-
-// Mock the useManager hook to control state
-let mockState: MockState = { status: 'idle' };
-vi.mock('@/hooks', () => ({
-  useManager: vi.fn((factory) => {
-    factory(); // Call factory to create manager
-    return [mockState, mockManager];
-  }),
-}));
-
-describe('Email', () => {
-  const defaultConfig = {
-    otpVerification: true,
-    otpExpirationInMinutes: 5,
-    prefill: false,
-    maxOtpAttempts: 3,
-  };
-
-  const defaultProps = {
-    config: defaultConfig,
-    onFinish: vi.fn(),
-    onError: vi.fn(),
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockState = { status: 'idle' };
-  });
-
-  describe('Rendering states', () => {
-    it('renders input page with loading button when status is idle', () => {
-      mockState = { status: 'idle' };
-      const { container } = render(<Email {...defaultProps} />);
-
-      expect(container.querySelector('.IncodeEmailPage')).toBeTruthy();
-      expect(screen.getByText('Verify Email')).toBeTruthy();
-      expect(screen.getByTestId('email-input')).toBeTruthy();
-      const button = screen.getByTestId('email-submit');
-      expect(button.classList.contains('IncodeButtonLoading')).toBeTruthy();
-      expect(button.hasAttribute('disabled')).toBeTruthy();
-    });
-
-    it('renders input page with loading button when status is loadingPrefill', () => {
-      mockState = { status: 'loadingPrefill' };
-      const { container } = render(<Email {...defaultProps} />);
-
-      expect(container.querySelector('.IncodeEmailPage')).toBeTruthy();
-      expect(screen.getByText('Verify Email')).toBeTruthy();
-      expect(screen.getByTestId('email-input')).toBeTruthy();
-      const button = screen.getByTestId('email-submit');
-      expect(button.classList.contains('IncodeButtonLoading')).toBeTruthy();
-      expect(button.hasAttribute('disabled')).toBeTruthy();
-    });
-
-    it('renders email input page when status is inputting', () => {
-      mockState = { status: 'inputting' };
-      render(<Email {...defaultProps} />);
-
-      expect(screen.getByText('Verify Email')).toBeTruthy();
-      expect(screen.getByTestId('email-input')).toBeTruthy();
-      const button = screen.getByTestId('email-submit');
-      expect(button.classList.contains('IncodeButtonLoading')).toBeFalsy();
-    });
-
-    it('renders input page with loading button when status is submitting', () => {
-      mockState = { status: 'submitting' };
-      const { container } = render(<Email {...defaultProps} />);
-
-      expect(container.querySelector('.IncodeEmailPage')).toBeTruthy();
-      expect(screen.getByTestId('email-input')).toBeTruthy();
-      const button = screen.getByTestId('email-submit');
-      expect(button.classList.contains('IncodeButtonLoading')).toBeTruthy();
-      expect(button.hasAttribute('disabled')).toBeTruthy();
-    });
-
-    it('renders input page with loading button when status is sendingOtp', () => {
-      mockState = { status: 'sendingOtp' };
-      const { container } = render(<Email {...defaultProps} />);
-
-      expect(container.querySelector('.IncodeEmailPage')).toBeTruthy();
-      expect(screen.getByTestId('email-input')).toBeTruthy();
-      const button = screen.getByTestId('email-submit');
-      expect(button.classList.contains('IncodeButtonLoading')).toBeTruthy();
-      expect(button.hasAttribute('disabled')).toBeTruthy();
-    });
-
-    it('renders OTP input page when status is awaitingOtp', () => {
-      mockState = {
-        status: 'awaitingOtp',
-        resendTimer: 30,
-        canResend: false,
-      };
-      render(<Email {...defaultProps} />);
-
-      expect(screen.getByText('Enter Verification Code')).toBeTruthy();
-      expect(screen.getByTestId('otp-submit')).toBeTruthy();
-    });
-
-    it('renders OTP input page when status is verifyingOtp', () => {
-      mockState = { status: 'verifyingOtp' };
-      render(<Email {...defaultProps} />);
-
-      expect(screen.getByText('Enter Verification Code')).toBeTruthy();
-    });
-
-    it('renders OTP error state when status is otpError', () => {
-      mockState = {
-        status: 'otpError',
-        error: 'Invalid code',
-      };
-      render(<Email {...defaultProps} />);
-
-      expect(screen.getByText('Enter Verification Code')).toBeTruthy();
-      expect(screen.getByTestId('otp-error')).toBeTruthy();
-      expect(screen.getByText('Invalid code')).toBeTruthy();
-    });
-  });
-
-  describe('Inputting state', () => {
-    beforeEach(() => {
-      mockState = { status: 'inputting' };
-    });
-
-    it('shows subtitle when OTP verification is enabled', () => {
-      render(<Email {...defaultProps} />);
-
-      expect(
-        screen.getByText('We will send you a verification code'),
-      ).toBeTruthy();
-    });
-
-    it('does not show subtitle when OTP verification is disabled', () => {
-      const configNoOtp = { ...defaultConfig, otpVerification: false };
-      render(<Email {...defaultProps} config={configNoOtp} />);
-
-      expect(
-        screen.queryByText('We will send you a verification code'),
-      ).toBeNull();
-    });
-
-    it('shows prefilled email when available', () => {
-      mockState = {
-        status: 'inputting',
-        prefilledEmail: 'prefilled@example.com',
-      };
-      render(<Email {...defaultProps} />);
-
-      const input = screen.getByTestId('email-input') as HTMLInputElement;
-      expect(input.value).toBe('prefilled@example.com');
-    });
-
-    it('shows email error when present', () => {
-      mockState = {
-        status: 'inputting',
-        emailError: 'Email already exists',
-      };
-      render(<Email {...defaultProps} />);
-
-      expect(screen.getByTestId('email-error')).toBeTruthy();
-      expect(screen.getByText('Email already exists')).toBeTruthy();
-    });
-
-    it('continue button is disabled initially', () => {
-      render(<Email {...defaultProps} />);
-
-      const button = screen.getByTestId('email-submit');
-      expect(button.hasAttribute('disabled')).toBe(true);
-    });
-
-    it('calls manager.setEmail when email changes', () => {
-      render(<Email {...defaultProps} />);
-
-      const input = screen.getByTestId('email-input');
-      fireEvent.input(input, { target: { value: 'user@example.com' } });
-
-      expect(mockManager.setEmail).toHaveBeenCalledWith(
-        'user@example.com',
-        true,
-      );
-    });
-
-    it('calls manager.submit when continue button is clicked', async () => {
-      render(<Email {...defaultProps} />);
-
-      // First enter a valid email to enable the button
-      const input = screen.getByTestId('email-input');
-      fireEvent.input(input, { target: { value: 'user@example.com' } });
-
-      // Now we need to update the mock to reflect that email is valid
-      // In the actual component, isEmailValid state is set
-
-      // For this test, we need to verify the button click handler
-      const button = screen.getByTestId('email-submit');
-      fireEvent.click(button);
-
-      // Note: Button may still be disabled because we're not fully simulating state
-      // The important thing is we test the integration
-    });
-  });
-
-  describe('OTP state', () => {
-    beforeEach(() => {
-      mockState = {
-        status: 'awaitingOtp',
-        resendTimer: 0,
-        canResend: true,
-      };
-    });
-
-    it('shows "change email address" as back link text', () => {
-      render(<Email {...defaultProps} />);
-
-      expect(screen.getByText('change email address')).toBeTruthy();
-    });
-
-    it('calls manager.submitOtp when OTP is submitted', () => {
-      mockState = {
-        status: 'awaitingOtp',
-        resendTimer: 0,
-        canResend: true,
-      };
-      render(<Email {...defaultProps} />);
-
-      // Fill OTP inputs
-      for (let i = 0; i < 6; i++) {
-        const input = screen.getByTestId(`otp-input-${i}`) as HTMLInputElement;
-        fireEvent.input(input, { target: { value: String(i) } });
-      }
-
-      const button = screen.getByTestId('otp-submit');
-      fireEvent.click(button);
-
-      expect(mockManager.submitOtp).toHaveBeenCalledWith('012345');
-    });
-
-    it('calls manager.resendOtp when resend is clicked', () => {
-      mockState = {
-        status: 'awaitingOtp',
-        resendTimer: 0,
-        canResend: true,
-      };
-      render(<Email {...defaultProps} />);
-
-      const resendLink = screen.getByText('Resend code');
-      fireEvent.click(resendLink);
-
-      expect(mockManager.resendOtp).toHaveBeenCalled();
-    });
-
-    it('calls manager.back when change email is clicked', () => {
-      mockState = {
-        status: 'awaitingOtp',
-        resendTimer: 0,
-        canResend: true,
-      };
-      render(<Email {...defaultProps} />);
-
-      const backLink = screen.getByText('change email address');
-      fireEvent.click(backLink);
-
-      expect(mockManager.back).toHaveBeenCalled();
-    });
-
-    it('shows timer when canResend is false', () => {
-      mockState = {
-        status: 'awaitingOtp',
-        resendTimer: 30,
-        canResend: false,
-      };
-      render(<Email {...defaultProps} />);
-
-      expect(screen.getByTestId('otp-timer')).toBeTruthy();
-    });
-  });
-
-  describe('Success state', () => {
-    it('calls onFinish when status is success', () => {
-      const onFinish = vi.fn();
-      mockState = { status: 'success' };
-
-      render(<Email {...defaultProps} onFinish={onFinish} />);
-
-      expect(onFinish).toHaveBeenCalled();
-    });
-
-    it('renders nothing in success state', () => {
-      mockState = { status: 'success' };
-      const { container } = render(<Email {...defaultProps} />);
-
-      expect(container.querySelector('.IncodeEmailPage')).toBeNull();
-    });
-  });
-
-  describe('Error state', () => {
-    it('calls onError when status is error', () => {
-      const onError = vi.fn();
-      mockState = { status: 'error', error: 'Something went wrong' };
-
-      render(<Email {...defaultProps} onError={onError} />);
-
-      expect(onError).toHaveBeenCalledWith('Something went wrong');
-    });
-
-    it('renders nothing in error state', () => {
-      mockState = { status: 'error', error: 'Error' };
-      const { container } = render(<Email {...defaultProps} />);
-
-      expect(container.querySelector('.IncodeEmailPage')).toBeNull();
-    });
-  });
-
-  describe('Config prop', () => {
-    it('renders nothing when config is not provided', () => {
-      // @ts-expect-error - Testing null config
-      const { container } = render(<Email config={null} {...defaultProps} />);
-
-      // Should not crash and should render wrapper
-      expect(container.querySelector('.IncodeComponent')).toBeTruthy();
-    });
-  });
-
-  describe('Component structure', () => {
-    it('wraps content in IncodeComponent div', () => {
-      mockState = { status: 'inputting' };
-      const { container } = render(<Email {...defaultProps} />);
-
-      expect(container.querySelector('.IncodeComponent')).toBeTruthy();
-    });
-
-    it('renders Page component with correct class', () => {
-      mockState = { status: 'inputting' };
-      const { container } = render(<Email {...defaultProps} />);
-
-      expect(container.querySelector('.IncodeEmailPage')).toBeTruthy();
-    });
-  });
-});

package/src/email/email.tsx

@@ -1,255 +0,0 @@
-/**
- * @module @incodetech/ui/email
- *
- * Email verification UI component for the Incode Web SDK.
- * Provides a complete, ready-to-use email verification experience
- * with email input and OTP verification.
- *
- * ## UI Usage
- *
- * The Email component can be used as a React/Preact component or as a
- * Web Component (`<incode-email>`).
- *
- * @example React/Preact component usage
- * ```tsx
- * import { Email } from '@incodetech/ui/email';
- * import { setup } from '@incodetech/core';
- *
- * // Configure the SDK first
- * setup({ apiURL: 'https://api.example.com', token: 'your-token' });
- *
- * function App() {
- *   const config = {
- *     otpVerification: true,
- *     otpExpirationInMinutes: 5,
- *     prefill: false,
- *   };
- *
- *   return (
- *     <Email
- *       config={config}
- *       onFinish={() => console.log('Email verified!')}
- *       onError={(error) => console.error('Error:', error)}
- *     />
- *   );
- * }
- * ```
- *
- * @example Web Component usage
- * ```html
- * <!-- Include the script -->
- * <script type="module">
- *   import '@incodetech/ui/email';
- *   import { setup } from '@incodetech/core';
- *
- *   setup({ apiURL: 'https://api.example.com', token: 'your-token' });
- *
- *   const email = document.querySelector('incode-email');
- *   email.config = {
- *     otpVerification: true,
- *     otpExpirationInMinutes: 5,
- *     prefill: false,
- *   };
- *   email.onFinish = () => console.log('Email verified!');
- *   email.onError = (error) => console.error('Error:', error);
- * </script>
- *
- * <incode-email></incode-email>
- * ```
- *
- * ## Styling
- *
- * The component uses CSS custom properties (variables) for theming.
- * Override these variables to customize the appearance:
- *
- * ```css
- * :root {
- *   --button-primary-surface-default: #0066cc;
- *   --input-border-default: #cccccc;
- *   --text-title: #333333;
- * }
- * ```
- *
- * ## Headless Alternative
- *
- * For complete control over the UI, use the headless `createEmailManager`
- * from `@incodetech/core/email` instead. See the core module documentation.
- */
-import './styles.css';
-import { createEmailManager, type EmailConfig } from '@incodetech/core/email';
-import type { FC } from 'preact/compat';
-import { useEffect, useState } from 'preact/hooks';
-import { useManager } from '@/hooks';
-import { Button } from '../shared/button/button';
-import { IncodeComponent } from '../shared/componentRoot/incodeComponent';
-import { OtpInput } from '../shared/otpInput/otpInput';
-import { Page } from '../shared/page/page';
-import { Spacer } from '../shared/spacer/spacer';
-import {
-  type IncodeModuleProps,
-  registerIncodeModuleElement,
-} from '../shared/webComponent/incodeModule';
-import { EmailInput } from './emailInput';
-
-/** @internal */
-type EmailContentProps = {
-  config: EmailConfig;
-  onFinish?: () => void;
-  onError?: (error: string | undefined) => void;
-};
-
-const EmailContent: FC<EmailContentProps> = ({ config, onFinish, onError }) => {
-  const [state, manager] = useManager(() => {
-    if (!config) {
-      throw new Error('Email config is required');
-    }
-    return createEmailManager({ config });
-  });
-  const [isEmailValid, setIsEmailValid] = useState(false);
-
-  useEffect(() => {
-    if (state.status === 'idle' && manager.load) {
-      try {
-        manager.load();
-      } catch (error) {
-        onError?.(
-          error instanceof Error
-            ? error.message
-            : 'Failed to initialize email verification',
-        );
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Handle input states: idle, loadingPrefill, inputting, submitting, sendingOtp
-  const isInputState =
-    state.status === 'idle' ||
-    state.status === 'loadingPrefill' ||
-    state.status === 'inputting' ||
-    state.status === 'submitting' ||
-    state.status === 'sendingOtp';
-
-  if (isInputState) {
-    const isLoading =
-      state.status === 'idle' ||
-      state.status === 'loadingPrefill' ||
-      state.status === 'submitting' ||
-      state.status === 'sendingOtp';
-
-    const prefilledEmail =
-      state.status === 'inputting' ? state.prefilledEmail : undefined;
-    const emailError =
-      state.status === 'inputting' ? state.emailError : undefined;
-
-    return (
-      <Page
-        className="IncodeEmailPage"
-        title="Verify Email"
-        subtitle={
-          config.otpVerification
-            ? 'We will send you a verification code'
-            : undefined
-        }
-      >
-        <EmailInput
-          prefilledEmail={prefilledEmail}
-          emailError={emailError}
-          disabled={isLoading}
-          onEmailChange={(email, isValid) => {
-            manager.setEmail(email, isValid);
-            setIsEmailValid(isValid);
-          }}
-        />
-        <Spacer />
-        <Button
-          onClick={() => manager.submit()}
-          disabled={!isEmailValid}
-          isLoading={isLoading}
-          data-testid="email-submit"
-        >
-          Continue
-        </Button>
-      </Page>
-    );
-  }
-
-  if (
-    state.status === 'awaitingOtp' ||
-    state.status === 'verifyingOtp' ||
-    state.status === 'otpError'
-  ) {
-    const isVerifying = state.status === 'verifyingOtp';
-
-    return (
-      <Page
-        className="IncodeEmailPage IncodeEmailOtpPage"
-        title="Enter Verification Code"
-      >
-        <OtpInput
-          resendTimer={state.status === 'awaitingOtp' ? state.resendTimer : 0}
-          canResend={state.status === 'awaitingOtp' ? state.canResend : false}
-          error={state.status === 'otpError' ? state.error : undefined}
-          onSubmit={(code) => manager.submitOtp(code)}
-          onResend={() => manager.resendOtp()}
-          onBack={() => manager.back()}
-          backLinkText="change email address"
-          isLoading={isVerifying}
-        />
-      </Page>
-    );
-  }
-
-  if (state.status === 'success') {
-    onFinish?.();
-    return null;
-  }
-
-  if (state.status === 'error') {
-    onError?.(state.error);
-    return null;
-  }
-
-  return null;
-};
-
-/**
- * Props for the Email component
- */
-type EmailProps = IncodeModuleProps<EmailConfig>;
-
-/**
- * Email verification UI component.
- *
- * Provides a complete email verification experience including:
- * - Email address input with validation
- * - OTP code entry with resend functionality
- * - Loading states and error handling
- *
- * @example Basic usage
- * ```tsx
- * <Email
- *   config={{
- *     otpVerification: true,
- *     otpExpirationInMinutes: 5,
- *     prefill: false,
- *   }}
- *   onFinish={() => router.push('/next-step')}
- *   onError={(err) => toast.error(err)}
- * />
- * ```
- *
- * @see {@link createEmailManager} for headless usage
- */
-export const Email: FC<EmailProps> = ({ config, onFinish, onError }) => {
-  return (
-    <IncodeComponent>
-      {config ? (
-        <EmailContent config={config} onFinish={onFinish} onError={onError} />
-      ) : null}
-    </IncodeComponent>
-  );
-};
-
-// Register as a Web Component
-registerIncodeModuleElement(Email, 'incode-email');