Add manual multipage sample

manual-multi-page/react/App.tsx

@@ -0,0 +1,136 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+    defineComponents,
+    DocumentReaderService,
+    DocumentReaderDetailType,
+    TransactionEvent,
+    DocumentReaderWebComponent,
+    ResponseCode,
+    EventActions,
+    InternalScenarios,
+    DocumentReaderResponseType,
+} from '@regulaforensics/vp-frontend-document-components';
+import Results from './Results';
+import './styles.css';
+
+enum Status {
+    Start,
+    Result,
+    Processing,
+}
+
+const App = () => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const elemRef = useRef<DocumentReaderWebComponent>(null);
+    const [response, setResponse] = useState<DocumentReaderResponseType | null>(null);
+    const [status, setStatus] = useState<Status>(Status.Start);
+    const [morePagesAvailable, setMorePagesAvailable] = useState(false);
+
+    const listener = async (data: CustomEvent<DocumentReaderDetailType | TransactionEvent>) => {
+        const action = data.detail.action;
+
+        if (action === EventActions.PROCESS_FINISHED) {
+            const status = data.detail.data?.status;
+            const isFinishStatus = status === ResponseCode.OK || status === ResponseCode.TIMEOUT;
+            const responseData = data.detail.data;
+
+            if (isFinishStatus && responseData?.response) {
+                setResponse(responseData.response);
+                setStatus(Status.Result);
+                setMorePagesAvailable(!!responseData?.response?.rawResponse.morePagesAvailable);
+            }
+        }
+        if (data.detail?.action === EventActions.CLOSE || data.detail?.action === EventActions.CAMERA_PROCESS_CLOSED) {
+            setResponse(null);
+            setMorePagesAvailable(false);
+            setStatus(Status.Start);
+        }
+    };
+
+    const startDocument = () => {
+        if (!window.RegulaDocumentSDK) return;
+
+        void window.RegulaDocumentSDK.startNewDocument();
+        setStatus(Status.Processing);
+    };
+
+    const startNewPage = () => {
+        if (!window.RegulaDocumentSDK) return;
+
+        void window.RegulaDocumentSDK.startNewPage();
+        setStatus(Status.Processing);
+    };
+
+    useEffect(() => {
+        window.RegulaDocumentSDK = new DocumentReaderService();
+        window.RegulaDocumentSDK.recognizerProcessParam = {
+            processParam: {
+                scenario: InternalScenarios.MrzAndLocate,
+                multipageProcessing: true,
+            },
+        };
+
+        defineComponents().then(() => window.RegulaDocumentSDK.initialize());
+        // To use the document-reader component on test environments, you have to set the base64 license
+        // defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: 'YOUR_BASE64_LICENSE_KEY' }));
+
+        const containerRefCurrent = containerRef.current;
+
+        if (!containerRefCurrent) return;
+
+        containerRefCurrent.addEventListener('document-reader', listener);
+
+        return () => {
+            window.RegulaDocumentSDK.shutdown();
+            containerRefCurrent.removeEventListener('document-reader', listener);
+        };
+    }, []);
+
+    useEffect(() => {
+        const elementRefCurrent = elemRef.current;
+
+        if (elementRefCurrent && status === Status.Processing) {
+            elementRefCurrent.settings = {
+                manualMultipageMode: true
+            };
+        }
+    }, [status]);
+
+    return (
+        <div ref={containerRef}>
+            {status === Status.Start && (
+                <div className='buttons'>
+                    <button className='button' onClick={startDocument}>
+                        Open Document Reader
+                    </button>
+                </div>
+            )}
+            {status === Status.Result && (
+                <>
+                    <div className='buttons'>
+                        <button className='button' onClick={startDocument}>
+                            Try again
+                        </button>
+                        {morePagesAvailable && (
+                            <button className='button' onClick={startNewPage}>
+                                Start new page
+                            </button>
+                        )}
+                    </div>
+                    {response && (
+                        <div className='results-container'>
+                            <Results response={response} />
+                        </div>
+                    )}
+                </>
+            )}
+            {status === Status.Processing && (
+                <div className='reader-container'>
+                    <document-reader new-layout ref={elemRef} />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default App;

manual-multi-page/react/Results.tsx

@@ -0,0 +1,45 @@
+import { DocumentReaderResponseType } from '@regulaforensics/vp-frontend-document-components';
+import {
+    DocReaderContainer,
+    Details,
+    Info,
+    Graphics,
+    Rfid,
+    ResponseViewer,
+    Logs,
+    PortraitsComparison,
+    Tabs,
+} from '@regulaforensics/ui-components';
+
+const ResultsTab = () => (
+    <>
+        <Details />
+        <Info />
+        <Graphics />
+        <Rfid />
+        <PortraitsComparison />
+    </>
+);
+
+type DocumentReaderResult = {
+    response: DocumentReaderResponseType;
+};
+
+const Results = ({ response }: DocumentReaderResult) => {
+    const items = [
+        { id: 'Results', label: 'Results', children: <ResultsTab /> },
+        { id: 'Response', label: 'Response', children: <ResponseViewer /> },
+    ];
+
+    if (response.rawResponse.log) {
+        items.push({ id: 'Logs', label: 'Logs', children: <Logs /> });
+    }
+
+    return (
+        <DocReaderContainer response={response.rawResponse}>
+            <Tabs type={'card'} items={items} />
+        </DocReaderContainer>
+    );
+};
+
+export default Results;

manual-multi-page/react/globals.d.ts

@@ -0,0 +1,10 @@
+import { DocumentReaderWebComponent, IDocumentReader } from '@regulaforensics/vp-frontend-document-components';
+
+declare global {
+  namespace React.JSX {
+    interface IntrinsicElements {
+      'document-reader': React.DetailedHTMLProps<IDocumentReader & React.HTMLAttributes<DocumentReaderWebComponent>,
+        DocumentReaderWebComponent>;
+    }
+  }
+}

manual-multi-page/react/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>My app</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/index.tsx"></script>
+</body>
+</html>

manual-multi-page/react/index.tsx

@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const element = document.getElementById('root');
+const root = createRoot(element as HTMLElement);
+
+root.render(<App />);

manual-multi-page/react/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "sample",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "serve": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@regulaforensics/ui-components": "nightly",
+    "@regulaforensics/vp-frontend-document-components": "nightly",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6"
+  }
+}

manual-multi-page/react/styles.css

@@ -0,0 +1,39 @@
+body {
+    background: #f5f5f5;
+}
+
+.results-container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.reader-container {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.buttons {
+    display: flex;
+    justify-content: center;
+    column-gap: 15px;
+    padding-bottom: 20px;
+}
+
+.button {
+    padding: 8px 15px;
+    border: 1px solid black;
+    background: #fff;
+    font-family: Arial, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 135%;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: .1s;
+}
+
+.button:hover {
+    background: #efefef;
+}

manual-multi-page/react/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}

manual-multi-page/react/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

manual-multi-page/typescript/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>My app</title>
+</head>
+<body>
+<div class="buttons">
+    <button class="button" id="new-document">Start new document</button>
+    <button class="button" id="new-page" disabled>Start new page</button>
+</div>
+<div class="info">Press "Start new document" to start scanning document.</div>
+<script type="module" src="/index.ts"></script>
+</body>
+</html>