@incodetech/web 2.0.0-alpha.1

package/src/flow/flow.tsx

@@ -0,0 +1,292 @@
+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

@@ -0,0 +1,30 @@
+@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

@@ -0,0 +1,331 @@
+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');
+    });
+  });
+});