@incodetech/web 2.0.0-alpha.1

package/dev/main-preact.tsx

@@ -0,0 +1,323 @@
+import '../src/styles/tokens/index.css';
+import '../src/selfie/selfie';
+import { setup } from '@incodetech/core';
+import type { FlowModuleConfig } from '@incodetech/core/flow';
+import { createFlowManager } from '@incodetech/core/flow';
+import { createSelfieManager } from '@incodetech/core/selfie';
+import { render } from 'preact';
+import type { FC } from 'preact/compat';
+import { useEffect, useState } from 'preact/hooks';
+import { useManager } from '../src/hooks';
+import { getToken } from './getToken';
+
+type SelfieModuleProps = {
+  config: FlowModuleConfig['SELFIE'];
+  onFinish: () => void;
+};
+
+const SelfieModule: FC<SelfieModuleProps> = ({ config, onFinish }) => {
+  const [state, selfieManager] = useManager(() =>
+    createSelfieManager({ config }),
+  );
+  const [tutorialLoading, setTutorialLoading] = useState(false);
+
+  useEffect(() => {
+    if (state.status !== 'tutorial') {
+      setTutorialLoading(false);
+    }
+  }, [state.status]);
+
+  if (state.status === 'loading') {
+    return <p>Loading...</p>;
+  }
+
+  if (state.status === 'tutorial') {
+    return (
+      <div>
+        <h2>Selfie Tutorial</h2>
+        <p>Position your face in the center</p>
+        <button
+          type="button"
+          disabled={tutorialLoading}
+          onClick={() => {
+            setTutorialLoading(true);
+            selfieManager.nextStep();
+          }}
+        >
+          {tutorialLoading ? 'Loading...' : 'Continue'}
+        </button>
+      </div>
+    );
+  }
+  if (state.status === 'permissions') {
+    if (state.permissionStatus === 'idle') {
+      return (
+        <div>
+          <h2>Camera Permission</h2>
+          <p>We need access to your camera</p>
+          <button
+            type="button"
+            onClick={() => selfieManager.requestPermission()}
+          >
+            Allow Camera
+          </button>
+          <button type="button" onClick={() => selfieManager.goToLearnMore()}>
+            Learn More
+          </button>
+        </div>
+      );
+    }
+
+    if (state.permissionStatus === 'requesting') {
+      return <p>Requesting camera access...</p>;
+    }
+
+    if (state.permissionStatus === 'denied') {
+      return (
+        <div>
+          <h2>Permission Denied</h2>
+          <p>Camera access was denied</p>
+          <button type="button" onClick={() => window.location.reload()}>
+            Refresh Browser
+          </button>
+        </div>
+      );
+    }
+
+    if (state.permissionStatus === 'learnMore') {
+      return (
+        <div>
+          <h2>Why we need camera</h2>
+          <p>To verify your identity</p>
+          <button
+            type="button"
+            onClick={() => selfieManager.requestPermission()}
+          >
+            Allow Camera
+          </button>
+          <button type="button" onClick={() => selfieManager.back()}>
+            Back
+          </button>
+          <button type="button" onClick={() => selfieManager.close()}>
+            Quit
+          </button>
+        </div>
+      );
+    }
+  }
+
+  if (state.status === 'capture') {
+    if (state.captureStatus === 'initializing') {
+      return (
+        <div>
+          <h2>Initializing Camera</h2>
+          <p>Please wait...</p>
+        </div>
+      );
+    }
+
+    if (state.captureStatus === 'detecting') {
+      return (
+        <div>
+          <h2>Face Detection</h2>
+          <p>
+            Status: <strong>{state.detectionStatus}</strong>
+          </p>
+          <p>Attempts remaining: {state.attemptsRemaining}</p>
+          {state.stream ? <Video stream={state.stream} /> : null}
+        </div>
+      );
+    }
+
+    if (state.captureStatus === 'capturing') {
+      return (
+        <div>
+          <h2>Capturing</h2>
+          <p>Taking photo...</p>
+        </div>
+      );
+    }
+
+    if (state.captureStatus === 'uploading') {
+      return (
+        <div>
+          <h2>Uploading</h2>
+          <p>Sending selfie to server...</p>
+        </div>
+      );
+    }
+
+    if (state.captureStatus === 'uploadError') {
+      return (
+        <div>
+          <h2>Upload Failed</h2>
+          <p>Error: {state.uploadError}</p>
+          <p>Attempts remaining: {state.attemptsRemaining}</p>
+          {state.attemptsRemaining > 0 ? (
+            <button type="button" onClick={() => selfieManager.retryCapture()}>
+              Retry
+            </button>
+          ) : (
+            <>
+              <p>
+                <strong style={{ color: 'red' }}>
+                  No more attempts available!
+                </strong>
+              </p>
+              <button type="button" onClick={onFinish}>
+                Continue
+              </button>
+            </>
+          )}
+        </div>
+      );
+    }
+
+    if (state.captureStatus === 'success') {
+      return (
+        <div>
+          <h2>Success!</h2>
+          <p>Selfie captured successfully!</p>
+        </div>
+      );
+    }
+  }
+
+  if (state.status === 'finished') {
+    onFinish();
+    return <p>Selfie complete!</p>;
+  }
+
+  if (state.status === 'error') {
+    if (state.error === 'PERMISSION_REFRESH') {
+      window.location.reload();
+      return null;
+    }
+    return (
+      <div>
+        <h2>Process Cancelled</h2>
+        <p>You quit the selfie process</p>
+        <button type="button" onClick={() => selfieManager.reset()}>
+          Try Again
+        </button>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+type VideoProps = {
+  stream: MediaStream;
+};
+
+const Video: FC<VideoProps> = ({ stream }) => {
+  const [videoRef, setVideoRef] = useState<HTMLVideoElement | null>(null);
+
+  useEffect(() => {
+    if (videoRef && stream) {
+      videoRef.srcObject = stream;
+    }
+  }, [videoRef, stream]);
+
+  return (
+    <video
+      ref={setVideoRef}
+      autoplay
+      playsInline
+      muted
+      style={{
+        width: '320px',
+        height: '240px',
+        transform: 'scaleX(-1)',
+        display: 'block',
+        marginTop: '16px',
+      }}
+    />
+  );
+};
+
+const App: FC = () => {
+  const [state, flowManager] = useManager(() => createFlowManager(), {
+    autoLoad: false,
+  });
+
+  useEffect(() => {
+    const init = async () => {
+      const { token } = await getToken();
+      setup({
+        apiURL: 'https://user-service-k8s.stage.incodetest.com/0',
+        token,
+      });
+      flowManager.load();
+    };
+    init();
+  }, [flowManager]);
+
+  if (state.status === 'loading') {
+    return <p>Loading flow...</p>;
+  }
+
+  if (state.status === 'ready') {
+    const { currentStep, config } = state;
+
+    if (!currentStep) {
+      return <p>No current step</p>;
+    }
+
+    if (currentStep === 'TUTORIAL_ID' || currentStep === 'ID') {
+      return (
+        <div>
+          <h1>This is {currentStep}</h1>
+          <p>Hi!</p>
+          <button type="button" onClick={() => flowManager.nextStep()}>
+            Continue
+          </button>
+        </div>
+      );
+    }
+
+    if (currentStep === 'SELFIE') {
+      const selfieConfig = config as FlowModuleConfig['SELFIE'];
+      return (
+        <div>
+          <h1>Selfie Module</h1>
+          <SelfieModule
+            config={selfieConfig}
+            onFinish={() => flowManager.nextStep()}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <h1>Unknown step</h1>
+        <p>step: {currentStep}</p>
+        <button type="button" onClick={() => flowManager.nextStep()}>
+          Continue
+        </button>
+      </div>
+    );
+  }
+
+  if (state.status === 'finished') {
+    return (
+      <div>
+        <h1>Finished</h1>
+        <p>Hi!</p>
+      </div>
+    );
+  }
+
+  if (state.status === 'error') {
+    return <div>{state.error}</div>;
+  }
+
+  return null;
+};
+
+const root = document.getElementById('root');
+if (root) {
+  render(<App />, root);
+}

package/dev/main-simplified.tsx

@@ -0,0 +1,123 @@
+import {
+  createSession,
+  initializeWasmUtil,
+  setup,
+  setWasmConfig,
+  type WasmConfig,
+} from '@incodetech/core';
+import '../src/styles/tokens/index.css';
+import '../src/styles/reset.css';
+import '../src/flow/flow'; // Registers <incode-flow> web component
+import '../src/flow/flowCompleted'; // Registers <incode-flow-completed> web component
+import '../src/flow/styles.css';
+import '../src/phone/styles.css';
+import '../src/types/custom-elements'; // Enables typed DOM access for custom elements
+import { getConfigIdFromUrl } from './getToken';
+
+const API_URL = 'https://user-service-k8s.stage.incodetest.com/0';
+const API_KEY = '5fbc0ab5a652b7808fbec42fffd8b4c9ec248413';
+
+const WASM_CONFIG: WasmConfig = {
+  wasmPath:
+    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLib.wasm',
+  wasmSimdPath:
+    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLibSimd.wasm',
+  glueCodePath:
+    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLib.js',
+  modelsBasePath:
+    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/models',
+  // pipelines will be determined by flow analysis
+};
+
+const root = document.getElementById('root');
+if (root) {
+  const initializeFlow = async () => {
+    try {
+      // Setup SDK with API URL first (required before createSession)
+      await setup({ apiURL: API_URL });
+
+      // Create session externally
+      const configurationId = getConfigIdFromUrl();
+      const session = await createSession(API_KEY, {
+        configurationId,
+        language: 'en-US',
+      });
+
+      // Setup WASM
+      const wasmConfig = {
+        ...WASM_CONFIG,
+        pipelines: ['selfie'],
+      } as WasmConfig;
+      console.log('WASM_CONFIG', wasmConfig);
+      setWasmConfig(wasmConfig);
+      await initializeWasmUtil(wasmConfig);
+
+      // Create element - automatically typed via HTMLElementTagNameMap augmentation
+      const flowElement = document.createElement('incode-flow');
+      flowElement.id = 'flow';
+
+      // Set all properties BEFORE appending to DOM
+      flowElement.apiURL = API_URL;
+      flowElement.token = session.token;
+      flowElement.wasmConfig = WASM_CONFIG;
+      flowElement.lang = 'en-US';
+
+      // Configure the loading spinner (optional customization)
+      // By default, IncodeFlow shows:
+      //   - Initialization: "Setting Up"
+      //   - Between modules: "Hang On" / "Validating"
+      // You can override with custom text:
+      // flowElement.spinnerConfig = {
+      //   title: 'Verifying your identity',
+      //   subtitle: 'This will only take a moment...',
+      //   size: 'medium',
+      // };
+
+      const startTime = performance.now();
+
+      flowElement.onComplete = (result) => {
+        const totalTime = performance.now() - startTime;
+        console.log(
+          `[Lazy Load] Flow complete in ${totalTime.toFixed(0)}ms`,
+          result,
+        );
+
+        // Remove the flow element and show the completed screen
+        flowElement.remove();
+
+        // Create and show the flow-completed component
+        const completedElement = document.createElement(
+          'incode-flow-completed',
+        );
+        completedElement.setAttribute('action', result.action);
+        completedElement.setAttribute('score-status', result.scoreStatus);
+        if (result.redirectionUrl) {
+          completedElement.setAttribute(
+            'redirection-url',
+            result.redirectionUrl,
+          );
+          completedElement.setAttribute('redirect-delay', '5000');
+        }
+        root.appendChild(completedElement);
+      };
+      flowElement.onError = (error) => {
+        console.error('[Lazy Load] Flow error:', error);
+        alert(`Flow error: ${error}`);
+      };
+
+      console.log(
+        '[Lazy Load] Demo initialized - watch Network tab for chunk loading',
+      );
+
+      // Now append to DOM - component will mount with all props set
+      root.appendChild(flowElement);
+    } catch (error) {
+      console.error('[Lazy Load] Failed to initialize:', error);
+      alert(
+        `Failed to initialize: ${error instanceof Error ? error.message : 'Unknown error'}`,
+      );
+    }
+  };
+
+  initializeFlow();
+}

package/dev/main-web-component.tsx

@@ -0,0 +1,256 @@
+import '../src/styles/tokens/index.css';
+import '../src/selfie/selfie';
+import '../src/selfie/styles.css';
+import '../src/phone/phone';
+import '../src/phone/styles.css';
+import '../src/email/email';
+import '../src/email/styles.css';
+import type { FlowModuleConfig } from '@incodetech/core/flow';
+import { createFlowManager } from '@incodetech/core/flow';
+import { render } from 'preact';
+import type { FC } from 'preact/compat';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useManager } from '../src/hooks';
+import { setup } from '../src/setup';
+import { getToken } from './getToken';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'incode-selfie': preact.JSX.HTMLAttributes<HTMLElement>;
+      'incode-phone': preact.JSX.HTMLAttributes<HTMLElement>;
+      'incode-email': preact.JSX.HTMLAttributes<HTMLElement>;
+    }
+  }
+}
+
+type SelfieElement = HTMLElement & {
+  config: FlowModuleConfig['SELFIE'];
+  onFinish: () => void;
+  onError: (error: string | undefined) => void;
+};
+
+type SelfieWebComponentProps = {
+  config: FlowModuleConfig['SELFIE'];
+  onFinish: () => void;
+  onError: (error: string | undefined) => void;
+};
+
+const SelfieWebComponent: FC<SelfieWebComponentProps> = ({
+  config,
+  onFinish,
+  onError,
+}) => {
+  const ref = useRef<SelfieElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.config = config;
+      ref.current.onFinish = onFinish;
+      ref.current.onError = onError;
+    }
+  }, [config, onFinish, onError]);
+
+  return <incode-selfie ref={ref} />;
+};
+
+type PhoneElement = HTMLElement & {
+  config: FlowModuleConfig['PHONE'];
+  onFinish: () => void;
+  onError: (error: string | undefined) => void;
+};
+
+const PhoneWebComponent: FC<{
+  config: FlowModuleConfig['PHONE'];
+  onFinish: () => void;
+  onError: (error: string | undefined) => void;
+}> = ({ config, onFinish, onError }) => {
+  const ref = useRef<PhoneElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.config = config;
+      ref.current.onFinish = onFinish;
+      ref.current.onError = onError;
+    }
+  }, [config, onFinish, onError]);
+
+  return <incode-phone ref={ref} />;
+};
+
+type EmailConfig = {
+  otpVerification: boolean;
+  otpExpirationInMinutes: number;
+  prefill: boolean;
+  maxOtpAttempts?: number;
+};
+
+type EmailElement = HTMLElement & {
+  config: EmailConfig;
+  onFinish: () => void;
+  onError: (error: string | undefined) => void;
+};
+
+const EmailWebComponent: FC<{
+  config: FlowModuleConfig['EMAIL'];
+  onFinish: () => void;
+  onError: (error: string | undefined) => void;
+}> = ({ config, onFinish, onError }) => {
+  const ref = useRef<EmailElement>(null);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    if (ref.current && !isReady) {
+      // Map FlowModuleConfig['EMAIL'] to full EmailConfig
+      ref.current.config = {
+        ...config,
+        prefill: false,
+        maxOtpAttempts: 3,
+      };
+      ref.current.onFinish = onFinish;
+      ref.current.onError = onError;
+      // Trigger re-render to pick up the config
+      setIsReady(true);
+    }
+  }, [config, onFinish, onError, isReady]);
+
+  return <incode-email ref={ref} />;
+};
+
+const App: FC = () => {
+  const [state, flowManager] = useManager(() => createFlowManager(), {
+    autoLoad: false,
+  });
+
+  useEffect(() => {
+    const init = async () => {
+      const { token } = await getToken();
+      await setup({
+        apiURL: 'https://user-service-k8s.stage.incodetest.com/0',
+        token,
+        wasm: {
+          wasmPath:
+            'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLib.wasm',
+          wasmSimdPath:
+            'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLibSimd.wasm',
+          glueCodePath:
+            'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLib.js',
+          modelsBasePath:
+            'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/models',
+          pipelines: ['selfie'],
+        },
+        i18n: {
+          lang: 'en',
+        },
+      });
+      flowManager.load();
+    };
+    init();
+  }, [flowManager]);
+
+  if (state.status === 'loading') {
+    return <p>Loading flow...</p>;
+  }
+
+  if (state.status === 'ready') {
+    const { currentStep, config } = state;
+
+    if (!currentStep) {
+      return <p>No current step</p>;
+    }
+
+    if (currentStep === 'TUTORIAL_ID' || currentStep === 'ID') {
+      return (
+        <div>
+          <h1>This is {currentStep}</h1>
+          <p>Hi!</p>
+          <button type="button" onClick={() => flowManager.nextStep()}>
+            Continue
+          </button>
+        </div>
+      );
+    }
+
+    if (currentStep === 'SELFIE') {
+      const selfieConfig = config as FlowModuleConfig['SELFIE'];
+      return (
+        <div style={{ width: '100%', height: '100%' }}>
+          <SelfieWebComponent
+            config={selfieConfig}
+            onFinish={() => flowManager.nextStep()}
+            onError={(error) => {
+              console.error('Selfie error:', error);
+              if (error === 'PERMISSION_REFRESH') {
+                window.location.reload();
+                return;
+              }
+              alert(`Selfie error: ${error}`);
+            }}
+          />
+        </div>
+      );
+    }
+
+    if (currentStep === 'PHONE') {
+      const phoneConfig = config as FlowModuleConfig['PHONE'];
+      return (
+        <div style={{ width: '100%', height: '100%' }}>
+          <PhoneWebComponent
+            config={phoneConfig}
+            onFinish={() => flowManager.nextStep()}
+            onError={(error) => {
+              console.error('Phone error:', error);
+              alert(`Phone error: ${error}`);
+            }}
+          />
+        </div>
+      );
+    }
+
+    if (currentStep === 'EMAIL') {
+      const emailConfig = config as FlowModuleConfig['EMAIL'];
+      return (
+        <div style={{ width: '100%', height: '100%' }}>
+          <EmailWebComponent
+            config={emailConfig}
+            onFinish={() => flowManager.nextStep()}
+            onError={(error) => {
+              console.error('Email error:', error);
+              alert(`Email error: ${error}`);
+            }}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <h1>Unknown step</h1>
+        <p>step: {currentStep}</p>
+        <button type="button" onClick={() => flowManager.nextStep()}>
+          Continue
+        </button>
+      </div>
+    );
+  }
+
+  if (state.status === 'finished') {
+    return (
+      <div>
+        <h1>Finished</h1>
+        <p>Hi!</p>
+      </div>
+    );
+  }
+
+  if (state.status === 'error') {
+    return <div>{state.error}</div>;
+  }
+
+  return null;
+};
+
+const root = document.getElementById('root');
+if (root) {
+  render(<App />, root);
+}