QRScanView

1import { YeriaApp } from '@numerum-tech/yeriasdk';
2
3const yeriaApp = new YeriaApp({ appId: 'my-app' });
4
5const qrScan = yeriaApp
6    .createQRScanView('scan-ticket', 'Scan Your Ticket')
7    .setIntro('Point camera at the QR code on your ticket');
8// → Scans, immediately POSTs { qrData: "ABC123" } to {baseUrl}/scan-ticket
9
10const response = yeriaApp.serve(qrScan);

1const qrScan = yeriaApp
2    .createQRScanView('verify-product', 'Verify Product')
3    .setIntro('Scan the product barcode')
4    .enablePreview('Product Code')
5    .submitButton('Verify Product');
6// → Scans, shows the code read-only, user clicks "Verify Product" to submit

1const qrScan = yeriaApp
2    .createQRScanView('scan-invoice', 'Scan Invoice')
3    .setIntro('Scan the invoice QR code')
4    .setValidation(
5        'Invalid invoice format',
6        'number',      // Format: digits only
7        10,            // minLength
8        15,            // maxLength
9        'INV-'         // startsWith prefix
10    )
11    .submitButton('Process Invoice');
12// → Accepts: "INV-123456" (10-15 chars total, digits after INV-)

1const qrScan = yeriaApp
2    .createQRScanView('scan-code', 'Scan Code')
3    .setIntro('Scan the 6-digit code')
4    .setValidation(
5        'Code must be 6 digits',
6        'number',  // Format: digits only
7        6,         // minLength
8        6          // maxLength
9    );
10// → Accepts: "123456", "000001"

1const qrScan = yeriaApp
2    .createQRScanView('scan-email', 'Scan Email QR')
3    .setIntro('Scan the email QR code')
4    .setValidation(
5        'Invalid email format',
6        'email'  // Simple check: has @ and .
7    )
8    .submitButton('Submit Email');
9// → Accepts: "user@example.com"

1const qrScan = yeriaApp
2    .createQRScanView('scan-url', 'Scan URL')
3    .setIntro('Scan the URL QR code')
4    .setValidation(
5        'Invalid URL',
6        'url'  // Starts with http:// or https://
7    )
8    .submitButton('Open URL');
9// → Accepts: "https://example.com"

1const qrScan = yeriaApp
2    .createQRScanView('scan-ticket', 'Scan Ticket')
3    .setIntro('Scan your ticket QR code')
4    .setValidation(
5        'Must start with TICKET-',
6        undefined,      // No format restriction
7        undefined,      // No minLength
8        undefined,      // No maxLength
9        'TICKET-'       // Required prefix
10    )
11    .submitButton('Confirm Ticket');
12// → Accepts: "TICKET-ABC123", "TICKET-XYZ"

1const qrScan = yeriaApp
2    .createQRScanView('scan-code', 'Scan Code')
3    .setIntro('Scan the code')
4    .setValidation(
5        'Code must be 8-20 characters',
6        undefined,  // No format restriction
7        8,          // minLength
8        20          // maxLength
9    )
10    .submitButton('Submit Code');

1const qrScan = yeriaApp
2    .createQRScanView('scan-confirm', 'Scan Code')
3    .setIntro('Scan the code on the parcel')
4    .enablePreview('Parcel Code')
5    .submitButton('Confirm', 'Check the code against the label before validating.');
6// → Shows the scanned code read-only, with the message rendered as help text
7//   next to it, and submits on the tap. The preview is never editable.

1const qrScan = yeriaApp
2    .createQRScanView('scan-review', 'Scan Code')
3    .setIntro('Scan the code')
4    .setAutoSubmit(false)  // Explicitly disable auto-submit
5    .submitButton('Review and Submit');
6// → Requires button click to submit

1const qrScan = yeriaApp
2    .createQRScanView('scan-step-2', 'Scan Verification Code')
3    .setProcess('verification', {
4        processName: 'Account Verification',
5        currentStep: 2,
6        totalSteps: 3,
7        stepName: 'Scan Code'
8    })
9    .setIntro('Scan the verification code sent to your email')
10    .setValidation(
11        'Invalid verification code',
12        'number',
13        6,
14        6
15    )
16    .submitButton('Verify');

1{
2  "id": "scan-verification",
3  "type": "QRScan",
4  "content": {
5    "title": "Scan Verification Code",
6    "intro": "Scan the verification code sent to your email",
7    "autoSubmit": true,
8    "submit": {
9      "text": "Verify",
10      "method": "POST"
11    },
12    "validation": {
13      "errorMessage": "Invalid verification code",
14      "format": "number",
15      "minLength": 6,
16      "maxLength": 6
17    },
18    "preview": {
19      "enabled": true,
20      "label": "Scanned Code"
21    }
22  },
23  "process": {
24    "processId": "verification",
25    "processName": "Account Verification",
26    "currentStep": 2,
27    "totalSteps": 3,
28    "stepName": "Scan Code"
29  },
30  "metadata": {
31    "version": "2.0.0",
32    "createdAt": "2025-01-28T10:00:00.000Z"
33  }
34}