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

package/src/flow/flow.tsx

@@ -1,292 +0,0 @@
-import type { WasmConfig } from '@incodetech/core';
-import type {
-  FinishStatus,
-  FlowModuleConfig,
-  OrchestratedFlowReadyState,
-} from '@incodetech/core/flow';
-import { getRequiredWasmPipelines } from '@incodetech/core/flow';
-import type { FC } from 'preact/compat';
-import { useEffect } from 'preact/hooks';
-import register from 'preact-custom-element';
-import { useManager } from '@/hooks';
-import { useTranslation } from '@/i18n';
-import { Spinner, type SpinnerSize } from '../shared/spinner';
-import { warmupWasmIfNeeded } from './flowInit';
-import { UnsupportedModule } from './unsupportedModule';
-import { useFlowInitialization } from './useFlowInitialization';
-import { useModuleLoader, usePrefetchNextModule } from './useModuleLoader';
-import './styles.css';
-import './flowStart.css';
-import './flowCompleted.css';
-
-export type SpinnerConfig = {
-  title?: string;
-  subtitle?: string;
-  size?: SpinnerSize;
-};
-
-export type IncodeFlowProps = {
-  apiURL: string;
-  token: string;
-  wasmConfig?: WasmConfig;
-  lang?: string;
-  disableDashboardTheme?: boolean;
-  onComplete: (result: FinishStatus) => void;
-  onError?: (error: string) => void;
-  onModuleLoading?: (moduleKey: string) => void;
-  onModuleLoaded?: (moduleKey: string) => void;
-  onWasmWarmup?: (pipelines: string[]) => void;
-  spinnerConfig?: SpinnerConfig;
-};
-
-const IncodeFlowContent: FC<IncodeFlowProps> = ({
-  apiURL,
-  token,
-  wasmConfig,
-  lang,
-  disableDashboardTheme,
-  onComplete,
-  onError,
-  onModuleLoading,
-  onModuleLoaded,
-  onWasmWarmup,
-  spinnerConfig,
-}) => {
-  const { t } = useTranslation();
-
-  const initState = useFlowInitialization({
-    apiURL,
-    token,
-    lang,
-    disableDashboardTheme,
-    onError,
-  });
-
-  const [flowState, flowManager] = useManager(() => initState.flowManager, {
-    autoLoad: false,
-  });
-
-  const moduleLoaderState = useModuleLoader({
-    moduleKey:
-      flowState?.status === 'ready' ? flowState.currentStep : undefined,
-    onModuleLoading,
-    onModuleLoaded,
-    onError,
-  });
-
-  usePrefetchNextModule(
-    flowState?.status === 'ready' ? flowState.steps : [],
-    flowState?.status === 'ready' ? flowState.currentStepIndex : -1,
-  );
-
-  useEffect(() => {
-    if (flowState?.status === 'ready' && wasmConfig) {
-      const readyState = flowState as OrchestratedFlowReadyState;
-      const requiredPipelines = getRequiredWasmPipelines(readyState.flow);
-      if (requiredPipelines.length > 0) {
-        onWasmWarmup?.(requiredPipelines);
-        warmupWasmIfNeeded(readyState, wasmConfig);
-      }
-    }
-  }, [flowState?.status, wasmConfig, flowState, onWasmWarmup]);
-
-  useEffect(() => {
-    if (flowState?.status === 'finished') {
-      onComplete(flowState.finishStatus);
-    }
-  }, [flowState?.status, onComplete, flowState]);
-
-  useEffect(() => {
-    if (flowState?.status === 'error' && onError) {
-      onError(flowState.error);
-    }
-  }, [flowState?.status, onError, flowState]);
-
-  if (initState.status === 'error') {
-    return (
-      <div class="IncodeFlow">
-        <div>Error: {initState.error}</div>
-      </div>
-    );
-  }
-
-  if (initState.status === 'initializing') {
-    return (
-      <div class="IncodeFlow">
-        <Spinner
-          title={spinnerConfig?.title ?? t('home.settingUp')}
-          subtitle={spinnerConfig?.subtitle}
-          size={spinnerConfig?.size}
-          fullScreen
-        />
-      </div>
-    );
-  }
-
-  if (
-    !flowState ||
-    flowState.status === 'idle' ||
-    flowState.status === 'loading'
-  ) {
-    return (
-      <div class="IncodeFlow">
-        <Spinner
-          title={spinnerConfig?.title ?? t('home.settingUp')}
-          subtitle={spinnerConfig?.subtitle}
-          size={spinnerConfig?.size}
-          fullScreen
-        />
-      </div>
-    );
-  }
-
-  if (flowState.status === 'error') {
-    return (
-      <div class="IncodeFlow">
-        <div>Error: {flowState.error}</div>
-      </div>
-    );
-  }
-
-  if (flowState.status === 'finished') {
-    return null;
-  }
-
-  if (flowState.status === 'ready') {
-    const { currentStep, config } = flowState;
-
-    if (!currentStep || !config) {
-      return (
-        <div class="IncodeFlow">
-          <Spinner
-            title={spinnerConfig?.title ?? t('loadingCircle.hangOn')}
-            subtitle={spinnerConfig?.subtitle ?? t('loadingCircle.validating')}
-            size={spinnerConfig?.size}
-            fullScreen
-          />
-        </div>
-      );
-    }
-
-    if (moduleLoaderState.status === 'unsupported') {
-      return (
-        <div class="IncodeFlow">
-          <UnsupportedModule
-            moduleKey={currentStep}
-            onNext={() => flowManager.completeModule()}
-          />
-        </div>
-      );
-    }
-
-    if (
-      moduleLoaderState.status === 'idle' ||
-      moduleLoaderState.status === 'loading' ||
-      moduleLoaderState.status === 'error'
-    ) {
-      return (
-        <div class="IncodeFlow">
-          <Spinner
-            title={spinnerConfig?.title ?? t('loadingCircle.hangOn')}
-            subtitle={spinnerConfig?.subtitle ?? t('loadingCircle.validating')}
-            size={spinnerConfig?.size}
-            fullScreen
-          />
-        </div>
-      );
-    }
-
-    const { Component } = moduleLoaderState;
-
-    if (currentStep === 'SELFIE') {
-      const selfieConfig = config as FlowModuleConfig['SELFIE'];
-      return (
-        <div class="IncodeFlow">
-          <Component
-            key={`selfie-${flowState.currentStepIndex}`}
-            config={selfieConfig}
-            onFinish={() => flowManager.completeModule()}
-            onError={(error: string | undefined) => {
-              onError?.(error ?? 'Selfie verification error');
-            }}
-          />
-        </div>
-      );
-    }
-
-    if (currentStep === 'PHONE') {
-      const phoneConfig = config as FlowModuleConfig['PHONE'];
-      return (
-        <div class="IncodeFlow">
-          <Component
-            key={`phone-${flowState.currentStepIndex}`}
-            config={phoneConfig}
-            onFinish={() => flowManager.completeModule()}
-            onError={(error: string | undefined) => {
-              onError?.(error ?? 'Phone verification error');
-            }}
-          />
-        </div>
-      );
-    }
-
-    if (currentStep === 'EMAIL') {
-      const emailConfig = config as FlowModuleConfig['EMAIL'];
-      if (
-        !emailConfig ||
-        typeof emailConfig.otpVerification !== 'boolean' ||
-        typeof emailConfig.otpExpirationInMinutes !== 'number'
-      ) {
-        return (
-          <div class="IncodeFlow">
-            <div>Error: Invalid email configuration</div>
-          </div>
-        );
-      }
-      return (
-        <div class="IncodeFlow">
-          <Component
-            key={`email-${flowState.currentStepIndex}`}
-            config={{
-              ...emailConfig,
-              prefill: emailConfig.prefill ?? false,
-            }}
-            onFinish={() => flowManager.completeModule()}
-            onError={(error: string | undefined) => {
-              onError?.(error ?? 'Email verification error');
-            }}
-          />
-        </div>
-      );
-    }
-  }
-
-  return null;
-};
-
-export const IncodeFlow: FC<IncodeFlowProps> = (props) => (
-  <div class="IncodeComponent">
-    <IncodeFlowContent {...props} />
-  </div>
-);
-
-register(
-  IncodeFlow,
-  'incode-flow',
-  [
-    'apiURL',
-    'token',
-    'wasmConfig',
-    'lang',
-    'disableDashboardTheme',
-    'spinnerConfig',
-    'onComplete',
-    'onError',
-  ],
-  {
-    shadow: false,
-  },
-);
-
-export type { PreloadHandle } from './preloadFlow';
-export { preloadIncodeFlow } from './preloadFlow';

package/src/flow/flowCompleted.css

@@ -1,30 +0,0 @@
-@reference "../styles/tailwind.css";
-
-.IncodeFlowCompleted {
-  @apply flex flex-col items-center justify-center h-full w-full p-20;
-}
-
-.IncodeComponent .IncodeFlowCompleted h1.IncodeFlowCompletedTitle {
-  font-size: 2rem;
-  margin: 20px 0;
-  font-weight: 700;
-  color: #20263d;
-  text-align: left;
-  width: 100%;
-}
-
-.IncodeComponent .IncodeFlowCompleted p.IncodeFlowCompletedSubtitle {
-  font-size: 1rem;
-  margin: 20px 0;
-  font-weight: 700;
-  color: #20263d;
-  text-align: left;
-  width: 100%;
-}
-
-@media screen and (min-width: 992px) {
-  .IncodeComponent .IncodeFlowCompleted h1.IncodeFlowCompletedTitle,
-  .IncodeComponent .IncodeFlowCompleted p.IncodeFlowCompletedSubtitle {
-    text-align: center;
-  }
-}

package/src/flow/flowCompleted.test.tsx

@@ -1,331 +0,0 @@
-import { render, screen } from '@testing-library/preact';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { FlowCompleted } from './flowCompleted';
-
-describe('FlowCompleted', () => {
-  const originalLocation = window.location;
-  const mockLocation = {
-    ...originalLocation,
-    href: '',
-    origin: 'https://example.com',
-    search: '',
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    vi.useFakeTimers();
-    Object.defineProperty(window, 'location', {
-      writable: true,
-      value: mockLocation,
-    });
-    mockLocation.href = '';
-    mockLocation.search = '';
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-    Object.defineProperty(window, 'location', {
-      writable: true,
-      value: originalLocation,
-    });
-  });
-
-  describe('Rendering', () => {
-    it('renders with default i18n title and message', () => {
-      render(<FlowCompleted />);
-
-      expect(screen.getByText('verificationComplete.title')).toBeTruthy();
-      expect(screen.getByText('verificationComplete.message')).toBeTruthy();
-    });
-
-    it('renders with custom title', () => {
-      render(<FlowCompleted title="Custom Title" />);
-
-      expect(screen.getByText('Custom Title')).toBeTruthy();
-      expect(screen.getByText('verificationComplete.message')).toBeTruthy();
-    });
-
-    it('renders with custom message', () => {
-      render(<FlowCompleted message="Custom Message" />);
-
-      expect(screen.getByText('verificationComplete.title')).toBeTruthy();
-      expect(screen.getByText('Custom Message')).toBeTruthy();
-    });
-
-    it('renders with both custom title and message', () => {
-      render(<FlowCompleted title="Custom Title" message="Custom Message" />);
-
-      expect(screen.getByText('Custom Title')).toBeTruthy();
-      expect(screen.getByText('Custom Message')).toBeTruthy();
-    });
-
-    it('renders with section element and correct structure', () => {
-      const { container } = render(
-        <FlowCompleted title="Test Title" message="Test Message" />,
-      );
-
-      const section = container.querySelector('section.IncodeFlowCompleted');
-      expect(section).toBeTruthy();
-      expect(section?.getAttribute('aria-live')).toBe('assertive');
-      expect(screen.getByText('Test Title')).toBeTruthy();
-      expect(screen.getByText('Test Message')).toBeTruthy();
-    });
-
-    it('renders with IncodeFlowCompleted wrapper class', () => {
-      const { container } = render(<FlowCompleted />);
-
-      const wrapper = container.querySelector('.IncodeFlowCompleted');
-      expect(wrapper).toBeTruthy();
-    });
-  });
-
-  describe('Redirect functionality', () => {
-    it('redirects after default delay (3000ms)', async () => {
-      render(<FlowCompleted redirectionUrl="https://example.com/redirect" />);
-
-      expect(mockLocation.href).toBe('');
-
-      await vi.runAllTimersAsync();
-
-      expect(mockLocation.href).toBe('https://example.com/redirect');
-    });
-
-    it('redirects after custom delay', async () => {
-      render(
-        <FlowCompleted
-          redirectionUrl="https://example.com/redirect"
-          redirectDelay={5000}
-        />,
-      );
-
-      expect(mockLocation.href).toBe('');
-
-      vi.advanceTimersByTime(4999);
-      expect(mockLocation.href).toBe('');
-
-      await vi.runAllTimersAsync();
-
-      expect(mockLocation.href).toBe('https://example.com/redirect');
-    });
-
-    it('does not redirect when disableRedirect is true', async () => {
-      render(
-        <FlowCompleted
-          redirectionUrl="https://example.com/redirect"
-          disableRedirect
-        />,
-      );
-
-      await vi.runAllTimersAsync();
-
-      expect(mockLocation.href).toBe('');
-    });
-
-    it('does not redirect when redirectionUrl is not provided', async () => {
-      render(<FlowCompleted />);
-
-      await vi.runAllTimersAsync();
-
-      expect(mockLocation.href).toBe('');
-    });
-
-    it('does not redirect when redirectOriginOnly is true and isRedirect query param is present', async () => {
-      mockLocation.search = '?isRedirect=true';
-      render(
-        <FlowCompleted
-          redirectionUrl="https://example.com/redirect"
-          redirectOriginOnly
-        />,
-      );
-
-      await vi.runAllTimersAsync();
-
-      expect(mockLocation.href).toBe('');
-    });
-
-    it('redirects when redirectOriginOnly is true but isRedirect query param is not present', async () => {
-      mockLocation.search = '';
-      render(
-        <FlowCompleted
-          redirectionUrl="https://example.com/redirect"
-          redirectOriginOnly
-        />,
-      );
-
-      await vi.runAllTimersAsync();
-
-      expect(mockLocation.href).toBe('https://example.com/redirect');
-    });
-  });
-
-  describe('URL query parameter handling', () => {
-    it('adds flowId to redirect URL', async () => {
-      render(
-        <FlowCompleted
-          redirectionUrl="https://example.com/redirect"
-          flowId="test-flow-id"
-        />,
-      );
-
-      await vi.runAllTimersAsync();
-
-      expect(mockLocation.href).toBe(
-        'https://example.com/redirect?flowId=test-flow-id',
-      );
-    });
-
-    it('adds interviewId to redirect URL when origins differ', async () => {
-      mockLocation.origin = 'https://example.com';
-      render(
-        <FlowCompleted
-          redirectionUrl="https://other-domain.com/redirect"
-          flowId="test-flow-id"
-          interviewId="test-interview-id"
-        />,
-      );
-
-      await vi.runAllTimersAsync();
-
-      const url = new URL(mockLocation.href);
-      expect(url.searchParams.get('flowId')).toBe('test-flow-id');
-      expect(url.searchParams.get('interviewId')).toBe('test-interview-id');
-    });
-
-    it('does not add interviewId when origins match', async () => {
-      mockLocation.origin = 'https://example.com';
-      render(
-        <FlowCompleted
-          redirectionUrl="https://example.com/redirect"
-          flowId="test-flow-id"
-          interviewId="test-interview-id"
-        />,
-      );
-
-      await vi.runAllTimersAsync();
-
-      const url = new URL(mockLocation.href);
-      expect(url.searchParams.get('flowId')).toBe('test-flow-id');
-      expect(url.searchParams.get('interviewId')).toBeNull();
-    });
-
-    it('handles invalid URL gracefully', async () => {
-      render(
-        <FlowCompleted
-          redirectionUrl="not-a-valid-url"
-          flowId="test-flow-id"
-          interviewId="test-interview-id"
-        />,
-      );
-
-      await vi.runAllTimersAsync();
-
-      expect(mockLocation.href).toContain('not-a-valid-url');
-      expect(mockLocation.href).toContain('flowId=test-flow-id');
-      expect(mockLocation.href).toContain('interviewId=test-interview-id');
-    });
-
-    it('handles URL with existing query parameters', async () => {
-      render(
-        <FlowCompleted
-          redirectionUrl="https://example.com/redirect?existing=param"
-          flowId="test-flow-id"
-        />,
-      );
-
-      await vi.runAllTimersAsync();
-
-      const url = new URL(mockLocation.href);
-      expect(url.searchParams.get('existing')).toBe('param');
-      expect(url.searchParams.get('flowId')).toBe('test-flow-id');
-    });
-  });
-
-  describe('Props handling', () => {
-    it('accepts action prop without affecting rendering', () => {
-      const { container } = render(
-        <FlowCompleted action="approved" title="Test" />,
-      );
-
-      expect(container.querySelector('.IncodeFlowCompleted')).toBeTruthy();
-      expect(screen.getByText('Test')).toBeTruthy();
-    });
-
-    it('accepts scoreStatus prop without affecting rendering', () => {
-      const { container } = render(
-        <FlowCompleted scoreStatus="OK" title="Test" />,
-      );
-
-      expect(container.querySelector('.IncodeFlowCompleted')).toBeTruthy();
-      expect(screen.getByText('Test')).toBeTruthy();
-    });
-
-    it('handles all scoreStatus values', () => {
-      const statuses = [
-        'OK',
-        'WARN',
-        'MANUAL_OK',
-        'FAIL',
-        'UNKNOWN',
-        'MANUAL_FAIL',
-      ] as const;
-
-      statuses.forEach((status) => {
-        const { unmount } = render(
-          <FlowCompleted scoreStatus={status} title="Test" />,
-        );
-        expect(screen.getByText('Test')).toBeTruthy();
-        unmount();
-      });
-    });
-
-    it('handles all action values', () => {
-      const actions = ['approved', 'rejected', 'none'] as const;
-
-      actions.forEach((action) => {
-        const { unmount } = render(
-          <FlowCompleted action={action} title="Test" />,
-        );
-        expect(screen.getByText('Test')).toBeTruthy();
-        unmount();
-      });
-    });
-  });
-
-  describe('Edge cases', () => {
-    it('handles empty strings for title and message', () => {
-      render(<FlowCompleted title="" message="" />);
-
-      expect(screen.getByText('verificationComplete.title')).toBeTruthy();
-      expect(screen.getByText('verificationComplete.message')).toBeTruthy();
-    });
-
-    it('handles very long redirect delay', async () => {
-      render(
-        <FlowCompleted
-          redirectionUrl="https://example.com/redirect"
-          redirectDelay={100000}
-        />,
-      );
-
-      vi.advanceTimersByTime(99999);
-      expect(mockLocation.href).toBe('');
-
-      await vi.runAllTimersAsync();
-
-      expect(mockLocation.href).toBe('https://example.com/redirect');
-    });
-
-    it('handles zero redirect delay', async () => {
-      render(
-        <FlowCompleted
-          redirectionUrl="https://example.com/redirect"
-          redirectDelay={0}
-        />,
-      );
-
-      await vi.runAllTimersAsync();
-
-      expect(mockLocation.href).toBe('https://example.com/redirect');
-    });
-  });
-});