@incodetech/prizma-core-screens 0.2.7 → 0.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/BiometricConsentScreen.d.ts +95 -0
- package/dist/BiometricConsentScreen.js +91 -0
- package/dist/BiometricConsentStrings.d.ts +84 -0
- package/dist/BiometricConsentStrings.js +31 -0
- package/dist/CaptureScreen.d.ts +13 -0
- package/dist/CaptureScreen.js +2 -2
- package/dist/DemoScreensLayout.css +16 -0
- package/dist/DemoScreensRedirectScreen.d.ts +6 -1
- package/dist/DemoScreensRedirectScreen.js +3 -2
- package/dist/DemoScreensStrings.d.ts +5 -0
- package/dist/DigitalIdUploadErrorScreen.d.ts +31 -0
- package/dist/DigitalIdUploadErrorScreen.js +26 -0
- package/dist/DigitalIdUploadFileTooLargeScreen.d.ts +27 -0
- package/dist/DigitalIdUploadFileTooLargeScreen.js +21 -0
- package/dist/DigitalIdUploadReviewScreen.d.ts +57 -0
- package/dist/DigitalIdUploadReviewScreen.js +44 -0
- package/dist/DigitalIdUploadStrings.d.ts +64 -0
- package/dist/DigitalIdUploadStrings.js +19 -0
- package/dist/DigitalIdUploadTutorialScreen.d.ts +28 -0
- package/dist/DigitalIdUploadTutorialScreen.js +23 -0
- package/dist/DocumentCaptureIllustration.d.ts +1 -1
- package/dist/EkybCountryScreen.d.ts +6 -6
- package/dist/EkybCountryScreen.js +20 -7
- package/dist/EkybStrings.d.ts +6 -1
- package/dist/ErrorScreensScreen.d.ts +5 -2
- package/dist/ErrorScreensScreen.js +15 -4
- package/dist/ErrorScreensStrings.d.ts +17 -2
- package/dist/ErrorScreensStrings.js +18 -10
- package/dist/FaceCaptureCapturingScreen.d.ts +63 -0
- package/dist/FaceCaptureCapturingScreen.js +62 -2
- package/dist/FaceCaptureLayout.css +69 -4
- package/dist/FaceCaptureStrings.d.ts +23 -0
- package/dist/FormScreen.css +14 -0
- package/dist/FormScreen.d.ts +28 -0
- package/dist/FormScreen.js +3 -2
- package/dist/IdCaptureLayout.css +165 -2
- package/dist/IdCaptureStageScreen.d.ts +47 -0
- package/dist/IdCaptureStageScreen.js +39 -3
- package/dist/IdCaptureStrings.d.ts +19 -0
- package/dist/ListScreen.d.ts +19 -0
- package/dist/ListScreen.js +7 -2
- package/dist/LoaderScreen.d.ts +7 -5
- package/dist/LoaderScreen.js +7 -5
- package/dist/LoadersStrings.d.ts +18 -5
- package/dist/OcrReviewErrorScreen.d.ts +30 -0
- package/dist/OcrReviewErrorScreen.js +24 -0
- package/dist/OcrReviewLayout.css +24 -0
- package/dist/OcrReviewLoadingScreen.d.ts +25 -0
- package/dist/OcrReviewLoadingScreen.js +19 -0
- package/dist/OcrReviewScreen.d.ts +76 -0
- package/dist/OcrReviewScreen.js +65 -0
- package/dist/OcrReviewStrings.d.ts +47 -0
- package/dist/OcrReviewStrings.js +17 -0
- package/dist/OcrReviewSuccessScreen.d.ts +30 -0
- package/dist/OcrReviewSuccessScreen.js +24 -0
- package/dist/PermissionsAllowScreen.d.ts +8 -11
- package/dist/PermissionsAllowScreen.js +8 -11
- package/dist/PermissionsAskScreen.d.ts +41 -0
- package/dist/PermissionsAskScreen.js +43 -0
- package/dist/PermissionsBrowserStepsScreen.d.ts +9 -2
- package/dist/PermissionsBrowserStepsScreen.js +12 -3
- package/dist/PermissionsLayout.css +47 -0
- package/dist/PermissionsStrings.d.ts +20 -9
- package/dist/PermissionsStrings.js +10 -4
- package/dist/PhoneInputOtpScreen.d.ts +8 -0
- package/dist/PhoneInputOtpScreen.js +26 -19
- package/dist/PhoneInputStrings.d.ts +11 -3
- package/dist/PhoneInputVerifyScreen.js +21 -5
- package/dist/QualifiedSignatureDocumentScreen.d.ts +8 -5
- package/dist/QualifiedSignatureDocumentScreen.js +9 -6
- package/dist/QualifiedSignatureResultScreen.d.ts +16 -13
- package/dist/QualifiedSignatureResultScreen.js +17 -18
- package/dist/QualifiedSignatureStrings.d.ts +11 -4
- package/dist/ResultScreen.d.ts +8 -0
- package/dist/ResultScreen.js +14 -3
- package/dist/ReusabilityCredentialSelectionScreen.d.ts +95 -0
- package/dist/ReusabilityCredentialSelectionScreen.js +94 -0
- package/dist/ReusabilityLayout.css +241 -0
- package/dist/ReusabilityPrivacyPolicyScreen.d.ts +55 -0
- package/dist/ReusabilityPrivacyPolicyScreen.js +44 -0
- package/dist/ReusabilityStrings.d.ts +85 -0
- package/dist/ReusabilityStrings.js +37 -0
- package/dist/ReviewScreen.d.ts +38 -12
- package/dist/ReviewScreen.js +41 -8
- package/dist/ScreenLayout.css +382 -6
- package/dist/VideoSelfieErrorScreen.js +1 -1
- package/dist/VideoSelfieIdCaptureScreen.js +1 -1
- package/dist/VideoSelfieLayout.css +304 -2
- package/dist/VideoSelfieSelfieCaptureScreen.js +1 -1
- package/dist/VideoSelfieSpeakScreen.js +1 -1
- package/dist/VideoSelfieStrings.d.ts +4 -1
- package/dist/VideoSelfieTurnHeadScreen.js +14 -11
- package/dist/VideoSelfieTutorialScreen.d.ts +9 -0
- package/dist/VideoSelfieTutorialScreen.js +10 -1
- package/dist/VideoSelfieWaveScreen.js +1 -1
- package/dist/ViewfinderScreen.css +36 -0
- package/dist/flows.d.ts +8 -0
- package/dist/flows.js +17 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.js +12 -0
- package/dist/styles.css +3 -0
- package/package.json +68 -3
- package/samples/video-selfie-camera-wide.jpg +0 -0
- package/samples/video-selfie-room-wide.jpg +0 -0
- package/src/BiometricConsentScreen.tsx +192 -0
- package/src/BiometricConsentStrings.ts +119 -0
- package/src/CaptureScreen.tsx +17 -0
- package/src/DemoScreensLayout.css +16 -0
- package/src/DemoScreensRedirectScreen.tsx +14 -6
- package/src/DemoScreensStrings.ts +5 -0
- package/src/DigitalIdUploadErrorScreen.tsx +83 -0
- package/src/DigitalIdUploadFileTooLargeScreen.tsx +67 -0
- package/src/DigitalIdUploadReviewScreen.tsx +119 -0
- package/src/DigitalIdUploadStrings.ts +88 -0
- package/src/DigitalIdUploadTutorialScreen.tsx +59 -0
- package/src/DocumentCaptureIllustration.tsx +1 -1
- package/src/EkybCountryScreen.tsx +23 -6
- package/src/EkybStrings.ts +6 -1
- package/src/ErrorScreensScreen.tsx +15 -4
- package/src/ErrorScreensStrings.ts +37 -12
- package/src/FaceCaptureCapturingScreen.tsx +102 -13
- package/src/FaceCaptureLayout.css +69 -4
- package/src/FaceCaptureStrings.ts +24 -0
- package/src/FormScreen.css +14 -0
- package/src/FormScreen.tsx +34 -0
- package/src/IdCaptureLayout.css +165 -2
- package/src/IdCaptureStageScreen.tsx +75 -0
- package/src/IdCaptureStrings.ts +19 -0
- package/src/ListScreen.tsx +48 -9
- package/src/LoaderScreen.tsx +7 -5
- package/src/LoadersStrings.ts +18 -5
- package/src/OcrReviewErrorScreen.tsx +53 -0
- package/src/OcrReviewLayout.css +24 -0
- package/src/OcrReviewLoadingScreen.tsx +48 -0
- package/src/OcrReviewScreen.tsx +190 -0
- package/src/OcrReviewStrings.ts +69 -0
- package/src/OcrReviewSuccessScreen.tsx +52 -0
- package/src/PermissionsAllowScreen.tsx +9 -10
- package/src/PermissionsAskScreen.tsx +105 -0
- package/src/PermissionsBrowserStepsScreen.tsx +11 -3
- package/src/PermissionsLayout.css +47 -0
- package/src/PermissionsStrings.ts +42 -12
- package/src/PhoneInputOtpScreen.tsx +23 -3
- package/src/PhoneInputStrings.ts +11 -3
- package/src/PhoneInputVerifyScreen.tsx +24 -4
- package/src/QualifiedSignatureDocumentScreen.tsx +9 -7
- package/src/QualifiedSignatureResultScreen.tsx +28 -26
- package/src/QualifiedSignatureStrings.ts +11 -4
- package/src/ResultScreen.tsx +33 -2
- package/src/ReusabilityCredentialSelectionScreen.tsx +246 -0
- package/src/ReusabilityLayout.css +241 -0
- package/src/ReusabilityPrivacyPolicyScreen.tsx +109 -0
- package/src/ReusabilityStrings.ts +127 -0
- package/src/ReviewScreen.tsx +96 -27
- package/src/ScreenLayout.css +382 -6
- package/src/VideoSelfieErrorScreen.tsx +1 -1
- package/src/VideoSelfieIdCaptureScreen.tsx +9 -1
- package/src/VideoSelfieLayout.css +304 -2
- package/src/VideoSelfieSelfieCaptureScreen.tsx +9 -1
- package/src/VideoSelfieSpeakScreen.tsx +9 -1
- package/src/VideoSelfieStrings.ts +4 -2
- package/src/VideoSelfieTurnHeadScreen.tsx +25 -14
- package/src/VideoSelfieTutorialScreen.tsx +11 -0
- package/src/VideoSelfieWaveScreen.tsx +9 -1
- package/src/ViewfinderScreen.css +36 -0
- package/src/flows.ts +25 -0
- package/src/index.ts +74 -3
- package/src/styles.css +3 -0
package/dist/LoaderScreen.d.ts
CHANGED
|
@@ -17,11 +17,13 @@ export interface LoaderScreenProps extends Omit<PrizmaProcessingScreenProps, 'st
|
|
|
17
17
|
* (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
|
|
18
18
|
*
|
|
19
19
|
* Figma: `Module Generic Screens` frames `67:2388` ("Processing…") and
|
|
20
|
-
* `67:3593` ("Just a moment…")
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
20
|
+
* `67:3593` ("Just a moment…"), plus the SDK's own "Hold on a sec…" wait that
|
|
21
|
+
* ID Capture, NFC and the Demo App show (`verifyingIdentity`). ONE screen for
|
|
22
|
+
* all of them, and for every module loader after them: logo header → Core's
|
|
23
|
+
* spinner → status line → reassurance line → the verified tag, with no CTA.
|
|
24
|
+
* The archetype already IS this recipe; this component exists so the family
|
|
25
|
+
* has a name a designer can point at and a copy contract a host can fill, not
|
|
26
|
+
* to add layout.
|
|
25
27
|
*
|
|
26
28
|
* Reach for `PrizmaResultScreen` the moment a wait screen needs a button — a
|
|
27
29
|
* loader with a "Cancel" is a result screen, and the missing CTA band here is
|
package/dist/LoaderScreen.js
CHANGED
|
@@ -8,11 +8,13 @@ import './ScreenLayout.css';
|
|
|
8
8
|
* (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
|
|
9
9
|
*
|
|
10
10
|
* Figma: `Module Generic Screens` frames `67:2388` ("Processing…") and
|
|
11
|
-
* `67:3593` ("Just a moment…")
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
11
|
+
* `67:3593` ("Just a moment…"), plus the SDK's own "Hold on a sec…" wait that
|
|
12
|
+
* ID Capture, NFC and the Demo App show (`verifyingIdentity`). ONE screen for
|
|
13
|
+
* all of them, and for every module loader after them: logo header → Core's
|
|
14
|
+
* spinner → status line → reassurance line → the verified tag, with no CTA.
|
|
15
|
+
* The archetype already IS this recipe; this component exists so the family
|
|
16
|
+
* has a name a designer can point at and a copy contract a host can fill, not
|
|
17
|
+
* to add layout.
|
|
16
18
|
*
|
|
17
19
|
* Reach for `PrizmaResultScreen` the moment a wait screen needs a button — a
|
|
18
20
|
* loader with a "Cancel" is a result screen, and the missing CTA band here is
|
package/dist/LoadersStrings.d.ts
CHANGED
|
@@ -1,10 +1,23 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* The
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
2
|
+
* The copy pairs the family records. The loader is a shape, and each entry
|
|
3
|
+
* here is a way of filling it that more than one module already uses — not a
|
|
4
|
+
* closed set. A module that waits for something else supplies its own pair of
|
|
5
|
+
* strings under a new key.
|
|
6
|
+
*
|
|
7
|
+
* - `processing` — frame `67:2388`. "Processing…" over the generic
|
|
8
|
+
* reassurance line. Watchlist for Business, eKYC, eKYB,
|
|
9
|
+
* Email Input and the signatures all draw this title.
|
|
10
|
+
* - `validating` — frame `67:3593`. "Just a moment…", the documents
|
|
11
|
+
* are being validated.
|
|
12
|
+
* - `verifyingIdentity` — the SDK's own `loadingCircle.holdOn` wait: "Hold on
|
|
13
|
+
* a sec…" over "We're verifying your identity". ID
|
|
14
|
+
* Capture, NFC and the Demo App show it between the
|
|
15
|
+
* last capture and the verdict (Camila, 2026-10-09).
|
|
16
|
+
*
|
|
17
|
+
* Copy rule for every wait title: the ellipsis is the single `…` character,
|
|
18
|
+
* never two or three periods, so the same word reads the same in every module.
|
|
6
19
|
*/
|
|
7
|
-
export type LoadersVariant = 'processing' | 'validating';
|
|
20
|
+
export type LoadersVariant = 'processing' | 'validating' | 'verifyingIdentity';
|
|
8
21
|
export interface LoadersCopy {
|
|
9
22
|
/** H2 status line ("Processing…"). */
|
|
10
23
|
title: string;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type PrizmaResultScreenProps } from './ResultScreen';
|
|
3
|
+
import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
|
|
4
|
+
import type { OcrReviewStrings } from './OcrReviewStrings';
|
|
5
|
+
import './ScreenLayout.css';
|
|
6
|
+
export interface OcrReviewErrorScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'> {
|
|
7
|
+
/** Module copy — this screen reads the `error` slice. */
|
|
8
|
+
strings: OcrReviewStrings;
|
|
9
|
+
screenId?: string;
|
|
10
|
+
overrides?: PrizmaScreenOverrides;
|
|
11
|
+
onAction?: PrizmaScreenActionHandler;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* OCR Review — "Something went wrong", built on Archetype F (GUIDELINES.md
|
|
15
|
+
* §6-F, `PrizmaResultScreen`). Figma: `OCR Error` (31084:18797), drawn OUTSIDE
|
|
16
|
+
* the Happy Path section and reached off the "Processed successfully?"
|
|
17
|
+
* decision's "No" branch — a plain status + title + "Try again" CTA.
|
|
18
|
+
*
|
|
19
|
+
* Nav and footer tag are left at the archetype's DEFAULT (shown). The frame
|
|
20
|
+
* itself draws neither, matching `DigitalIdUploadFileTooLargeScreen.tsx` —
|
|
21
|
+
* but that screen is the ONE exception in the whole package, not the pattern:
|
|
22
|
+
* every other error screen (`EkycErrorScreen`, `EkybErrorScreen`,
|
|
23
|
+
* `EmailInputErrorScreen`, `FormsErrorScreen`, `IdCaptureDocumentErrorScreen`)
|
|
24
|
+
* keeps both. Hiding them here, with only one CTA to balance the bottom,
|
|
25
|
+
* pushed the status + title below where every sibling error screen centres it
|
|
26
|
+
* (Mili, 2026-10-12 — checked against the system's own screens, not re-derived
|
|
27
|
+
* from the frame).
|
|
28
|
+
*/
|
|
29
|
+
export declare const OcrReviewErrorScreen: React.ForwardRefExoticComponent<OcrReviewErrorScreenProps & React.RefAttributes<HTMLDivElement>>;
|
|
30
|
+
export default OcrReviewErrorScreen;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { PrizmaResultScreen } from './ResultScreen';
|
|
5
|
+
import './ScreenLayout.css';
|
|
6
|
+
/**
|
|
7
|
+
* OCR Review — "Something went wrong", built on Archetype F (GUIDELINES.md
|
|
8
|
+
* §6-F, `PrizmaResultScreen`). Figma: `OCR Error` (31084:18797), drawn OUTSIDE
|
|
9
|
+
* the Happy Path section and reached off the "Processed successfully?"
|
|
10
|
+
* decision's "No" branch — a plain status + title + "Try again" CTA.
|
|
11
|
+
*
|
|
12
|
+
* Nav and footer tag are left at the archetype's DEFAULT (shown). The frame
|
|
13
|
+
* itself draws neither, matching `DigitalIdUploadFileTooLargeScreen.tsx` —
|
|
14
|
+
* but that screen is the ONE exception in the whole package, not the pattern:
|
|
15
|
+
* every other error screen (`EkycErrorScreen`, `EkybErrorScreen`,
|
|
16
|
+
* `EmailInputErrorScreen`, `FormsErrorScreen`, `IdCaptureDocumentErrorScreen`)
|
|
17
|
+
* keeps both. Hiding them here, with only one CTA to balance the bottom,
|
|
18
|
+
* pushed the status + title below where every sibling error screen centres it
|
|
19
|
+
* (Mili, 2026-10-12 — checked against the system's own screens, not re-derived
|
|
20
|
+
* from the frame).
|
|
21
|
+
*/
|
|
22
|
+
export const OcrReviewErrorScreen = forwardRef(({ strings, screenId = 'ocr-review-error', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, status: "error", title: strings.error.title, ctaLabel: strings.error.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
|
|
23
|
+
OcrReviewErrorScreen.displayName = 'OcrReviewErrorScreen';
|
|
24
|
+
export default OcrReviewErrorScreen;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* OCR Review — the one piece of chrome the archetype doesn't own.
|
|
2
|
+
*
|
|
3
|
+
* `PrizmaFormScreen.media` places whatever the module hands it; the circular
|
|
4
|
+
* crop and fixed size are the module's own, same split `progress` already
|
|
5
|
+
* draws (the archetype positions a `PrizmaStepper`, never sizes it). 90×90,
|
|
6
|
+
* centred — Figma's `Image / Selfie` instance, read straight off the frame. A
|
|
7
|
+
* `fields` row defaults to `align-items: stretch` (FormScreen.css), so the
|
|
8
|
+
* thumbnail is the one row that opts itself out with `align-self`.
|
|
9
|
+
*/
|
|
10
|
+
.ocr-review__photo {
|
|
11
|
+
width: 90px;
|
|
12
|
+
height: 90px;
|
|
13
|
+
flex-shrink: 0;
|
|
14
|
+
align-self: center;
|
|
15
|
+
border-radius: var(--prizma-border-radius-full);
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.ocr-review__photo img {
|
|
20
|
+
display: block;
|
|
21
|
+
width: 100%;
|
|
22
|
+
height: 100%;
|
|
23
|
+
object-fit: cover;
|
|
24
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type PrizmaResultScreenProps } from './ResultScreen';
|
|
3
|
+
import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
|
|
4
|
+
import type { OcrReviewStrings } from './OcrReviewStrings';
|
|
5
|
+
import './ScreenLayout.css';
|
|
6
|
+
export interface OcrReviewLoadingScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'> {
|
|
7
|
+
/** Module copy — this screen reads the `loading` slice. */
|
|
8
|
+
strings: OcrReviewStrings;
|
|
9
|
+
screenId?: string;
|
|
10
|
+
overrides?: PrizmaScreenOverrides;
|
|
11
|
+
onAction?: PrizmaScreenActionHandler;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* OCR Review — server-side verification wait ("Hold on a sec…"). Figma:
|
|
15
|
+
* `1-18-1-id-hold-on` (31084:18795) — ID Capture's own frame, redrawn here
|
|
16
|
+
* rather than imported by reference: every module in this package owns its
|
|
17
|
+
* hold-on-shaped screen independently (`IdCaptureHoldOnScreen.tsx` is ID
|
|
18
|
+
* Capture's), and a cross-module import was tried once (Digital ID Upload)
|
|
19
|
+
* and dropped rather than kept.
|
|
20
|
+
*
|
|
21
|
+
* Archetype C (§6-C), `PrizmaResultScreen` with `status="loading"` and no CTA
|
|
22
|
+
* — identical shape to `IdCaptureHoldOnScreen.tsx`.
|
|
23
|
+
*/
|
|
24
|
+
export declare const OcrReviewLoadingScreen: React.ForwardRefExoticComponent<OcrReviewLoadingScreenProps & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
+
export default OcrReviewLoadingScreen;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { PrizmaResultScreen } from './ResultScreen';
|
|
5
|
+
import './ScreenLayout.css';
|
|
6
|
+
/**
|
|
7
|
+
* OCR Review — server-side verification wait ("Hold on a sec…"). Figma:
|
|
8
|
+
* `1-18-1-id-hold-on` (31084:18795) — ID Capture's own frame, redrawn here
|
|
9
|
+
* rather than imported by reference: every module in this package owns its
|
|
10
|
+
* hold-on-shaped screen independently (`IdCaptureHoldOnScreen.tsx` is ID
|
|
11
|
+
* Capture's), and a cross-module import was tried once (Digital ID Upload)
|
|
12
|
+
* and dropped rather than kept.
|
|
13
|
+
*
|
|
14
|
+
* Archetype C (§6-C), `PrizmaResultScreen` with `status="loading"` and no CTA
|
|
15
|
+
* — identical shape to `IdCaptureHoldOnScreen.tsx`.
|
|
16
|
+
*/
|
|
17
|
+
export const OcrReviewLoadingScreen = forwardRef(({ strings, screenId = 'ocr-review-loading', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, status: "loading", title: strings.loading.title, subtitle: strings.loading.description, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
|
|
18
|
+
OcrReviewLoadingScreen.displayName = 'OcrReviewLoadingScreen';
|
|
19
|
+
export default OcrReviewLoadingScreen;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type PrizmaFormScreenProps } from './FormScreen';
|
|
3
|
+
import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
|
|
4
|
+
import type { OcrReviewState, OcrReviewStrings } from './OcrReviewStrings';
|
|
5
|
+
import './ScreenLayout.css';
|
|
6
|
+
import './OcrReviewLayout.css';
|
|
7
|
+
export interface OcrReviewScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel' | 'scrollFields'> {
|
|
8
|
+
/** Module copy — this screen reads the `review` slice. */
|
|
9
|
+
strings: OcrReviewStrings;
|
|
10
|
+
/** Which `Review OCR Enable Edit` instance to render. Default `default`.
|
|
11
|
+
* Ignored when `editable` is `false` — the disabled frame draws none of
|
|
12
|
+
* these states (there is nothing to submit wrong when nothing can be
|
|
13
|
+
* typed). */
|
|
14
|
+
state?: OcrReviewState;
|
|
15
|
+
/**
|
|
16
|
+
* `Review OCR Enable Edit` vs `Review OCR Disable Edit` (30530:119373) — the
|
|
17
|
+
* module's own boolean axis, orthogonal to `state`. `false` renders every
|
|
18
|
+
* field `disabled` (Core's grey surface + dimmed text, same prop
|
|
19
|
+
* `PrizmaTextField` / `PrizmaDateField` / `PrizmaRadioGroup` already ship)
|
|
20
|
+
* with no required asterisks (the frame hides them — nothing to validate on
|
|
21
|
+
* a field nobody can edit) while Continue stays enabled. Default `true`.
|
|
22
|
+
*/
|
|
23
|
+
editable?: boolean;
|
|
24
|
+
/** The subject photo — Figma's `Image / Selfie`, 90×90 circular. */
|
|
25
|
+
photoSrc: string;
|
|
26
|
+
/** Field values the fields start with. Every field is uncontrolled
|
|
27
|
+
* (`defaultValue`) — a screen is one static spec state, same rule
|
|
28
|
+
* `EkycDetailsScreen` draws (#PI-6). */
|
|
29
|
+
values?: {
|
|
30
|
+
fullName?: string;
|
|
31
|
+
dateOfBirth?: string;
|
|
32
|
+
gender?: 'male' | 'female';
|
|
33
|
+
documentNumber?: string;
|
|
34
|
+
expiryDate?: string;
|
|
35
|
+
address?: string;
|
|
36
|
+
};
|
|
37
|
+
screenId?: string;
|
|
38
|
+
overrides?: PrizmaScreenOverrides;
|
|
39
|
+
onAction?: PrizmaScreenActionHandler;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* OCR Review — "Please check your data", built on the Form archetype
|
|
43
|
+
* (GUIDELINES.md §6-E, `PrizmaFormScreen`).
|
|
44
|
+
*
|
|
45
|
+
* ONE screen for both drawn states: `default` (31084:18792 / 18794 — every
|
|
46
|
+
* field filled, Continue enabled) and `documentNumberMissing` (31084:18793 —
|
|
47
|
+
* every OTHER field keeps its filled value, only Document number is cleared
|
|
48
|
+
* and carries Core's `error` + `documentNumberRequiredError`). Unlike eKYC's
|
|
49
|
+
* `emptyError` (every required field clears and errors together), this frame
|
|
50
|
+
* draws a SINGLE field in that state — the empty-submit rule still applies,
|
|
51
|
+
* scoped to the one field Figma actually shows failing it.
|
|
52
|
+
*
|
|
53
|
+
* The photo sits ABOVE Full name as the field stack's own first row — Figma's
|
|
54
|
+
* `input-list` draws it at the same Spacing/16 rhythm as every field below it.
|
|
55
|
+
* It is the field stack's plain FIRST CHILD, nothing more: `PrizmaFormScreen`
|
|
56
|
+
* already renders whatever `children` hands it with that same gap, so this
|
|
57
|
+
* needed no new slot on the archetype (the archetype is untouched).
|
|
58
|
+
*
|
|
59
|
+
* Date of birth and Expiry date are both Core's `PrizmaDateField` — the
|
|
60
|
+
* frame's "Dropdown" instance name is the shared component's internal name for
|
|
61
|
+
* a date-kind field, not a literal dropdown (same reading `EkycDetailsScreen`
|
|
62
|
+
* gives its own Date of birth field). Gender is Core's `PrizmaRadioGroup` +
|
|
63
|
+
* `PrizmaRadio` — first real consumer of either in this package.
|
|
64
|
+
*
|
|
65
|
+
* The field stack SCROLLS (`scrollFields`, the same archetype prop eKYB's
|
|
66
|
+
* `EkybOwnersScreen`, Forms' long form and Qualified Signature's accept screen
|
|
67
|
+
* already use): the photo plus six fields do not fit an 844 frame without it,
|
|
68
|
+
* and without the release the Address row paints under the CTA instead of
|
|
69
|
+
* above it. Not a prop a caller picks — this module always needs it, so it is
|
|
70
|
+
* omitted from `OcrReviewScreenProps` and hardcoded here, matching those three
|
|
71
|
+
* precedents. `Review OCR Disable Edit` overflows the same way (its own
|
|
72
|
+
* `input-list` measures 654 against a 448 middle container) — one more reason
|
|
73
|
+
* `editable` is a prop of this same screen rather than a second component.
|
|
74
|
+
*/
|
|
75
|
+
export declare const OcrReviewScreen: React.ForwardRefExoticComponent<OcrReviewScreenProps & React.RefAttributes<HTMLDivElement>>;
|
|
76
|
+
export default OcrReviewScreen;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
|
|
5
|
+
import { PrizmaDateField } from '@incodetech/prizma-core-web/date-field';
|
|
6
|
+
import { PrizmaRadio } from '@incodetech/prizma-core-web/radio';
|
|
7
|
+
import { PrizmaRadioGroup } from '@incodetech/prizma-core-web/radio-group';
|
|
8
|
+
import { PrizmaFormScreen } from './FormScreen';
|
|
9
|
+
import './ScreenLayout.css';
|
|
10
|
+
import './OcrReviewLayout.css';
|
|
11
|
+
/**
|
|
12
|
+
* OCR Review — "Please check your data", built on the Form archetype
|
|
13
|
+
* (GUIDELINES.md §6-E, `PrizmaFormScreen`).
|
|
14
|
+
*
|
|
15
|
+
* ONE screen for both drawn states: `default` (31084:18792 / 18794 — every
|
|
16
|
+
* field filled, Continue enabled) and `documentNumberMissing` (31084:18793 —
|
|
17
|
+
* every OTHER field keeps its filled value, only Document number is cleared
|
|
18
|
+
* and carries Core's `error` + `documentNumberRequiredError`). Unlike eKYC's
|
|
19
|
+
* `emptyError` (every required field clears and errors together), this frame
|
|
20
|
+
* draws a SINGLE field in that state — the empty-submit rule still applies,
|
|
21
|
+
* scoped to the one field Figma actually shows failing it.
|
|
22
|
+
*
|
|
23
|
+
* The photo sits ABOVE Full name as the field stack's own first row — Figma's
|
|
24
|
+
* `input-list` draws it at the same Spacing/16 rhythm as every field below it.
|
|
25
|
+
* It is the field stack's plain FIRST CHILD, nothing more: `PrizmaFormScreen`
|
|
26
|
+
* already renders whatever `children` hands it with that same gap, so this
|
|
27
|
+
* needed no new slot on the archetype (the archetype is untouched).
|
|
28
|
+
*
|
|
29
|
+
* Date of birth and Expiry date are both Core's `PrizmaDateField` — the
|
|
30
|
+
* frame's "Dropdown" instance name is the shared component's internal name for
|
|
31
|
+
* a date-kind field, not a literal dropdown (same reading `EkycDetailsScreen`
|
|
32
|
+
* gives its own Date of birth field). Gender is Core's `PrizmaRadioGroup` +
|
|
33
|
+
* `PrizmaRadio` — first real consumer of either in this package.
|
|
34
|
+
*
|
|
35
|
+
* The field stack SCROLLS (`scrollFields`, the same archetype prop eKYB's
|
|
36
|
+
* `EkybOwnersScreen`, Forms' long form and Qualified Signature's accept screen
|
|
37
|
+
* already use): the photo plus six fields do not fit an 844 frame without it,
|
|
38
|
+
* and without the release the Address row paints under the CTA instead of
|
|
39
|
+
* above it. Not a prop a caller picks — this module always needs it, so it is
|
|
40
|
+
* omitted from `OcrReviewScreenProps` and hardcoded here, matching those three
|
|
41
|
+
* precedents. `Review OCR Disable Edit` overflows the same way (its own
|
|
42
|
+
* `input-list` measures 654 against a 448 middle container) — one more reason
|
|
43
|
+
* `editable` is a prop of this same screen rather than a second component.
|
|
44
|
+
*/
|
|
45
|
+
export const OcrReviewScreen = forwardRef(({ strings, state = 'default', editable = true, photoSrc, values, screenId = editable ? `ocr-review-${state}` : 'ocr-review-disabled', ctaDisabled, className, overrides, onAction, ...shell }, ref) => {
|
|
46
|
+
// The empty-submit retry only exists on the editable frame — nothing can
|
|
47
|
+
// be left empty on a field nobody can type into.
|
|
48
|
+
const documentNumberMissing = editable && state === 'documentNumberMissing';
|
|
49
|
+
const documentNumberError = documentNumberMissing
|
|
50
|
+
? { error: true, errorText: strings.review.documentNumberRequiredError }
|
|
51
|
+
: {};
|
|
52
|
+
// `Review OCR Disable Edit` hides every required asterisk (31256:169923 is
|
|
53
|
+
// marked `hidden` on its own Gender row) — spread onto every field only
|
|
54
|
+
// when editable, rather than a `required={editable}` on each that would
|
|
55
|
+
// still render an empty, pointless suffix slot.
|
|
56
|
+
const requiredProps = editable
|
|
57
|
+
? { required: true, requiredHint: strings.review.requiredHint }
|
|
58
|
+
: {};
|
|
59
|
+
return (_jsxs(PrizmaFormScreen, { ref: ref, className: className, title: strings.review.title, ctaLabel: strings.review.ctaLabel, ctaDisabled: ctaDisabled, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction,
|
|
60
|
+
/* The archetype's own scrolling field stack — the photo plus six
|
|
61
|
+
fields do not fit an 844 frame. No module CSS. */
|
|
62
|
+
scrollFields: true, ...shell, children: [_jsx("div", { className: "ocr-review__photo", children: _jsx("img", { src: photoSrc, alt: "" }) }), _jsx(PrizmaTextField, { label: strings.review.fullNameLabel, ...requiredProps, disabled: !editable, defaultValue: values?.fullName ?? '', autoComplete: "off", clearable: false }), _jsx(PrizmaDateField, { label: strings.review.dateOfBirthLabel, ...requiredProps, disabled: !editable, defaultValue: values?.dateOfBirth ?? '', autoComplete: "off" }), _jsxs(PrizmaRadioGroup, { name: `${screenId}-gender`, legend: strings.review.genderLabel, defaultValue: values?.gender, disabled: !editable, children: [_jsx(PrizmaRadio, { textSize: "m", value: "male", text: strings.review.maleLabel }), _jsx(PrizmaRadio, { textSize: "m", value: "female", text: strings.review.femaleLabel })] }), _jsx(PrizmaTextField, { label: strings.review.documentNumberLabel, ...requiredProps, ...documentNumberError, disabled: !editable, defaultValue: documentNumberMissing ? '' : values?.documentNumber ?? '', autoComplete: "off", clearable: false }), _jsx(PrizmaDateField, { label: strings.review.expiryDateLabel, ...requiredProps, disabled: !editable, defaultValue: values?.expiryDate ?? '', autoComplete: "off" }), _jsx(PrizmaTextField, { label: strings.review.addressLabel, ...requiredProps, disabled: !editable, defaultValue: values?.address ?? '', autoComplete: "off", clearable: false })] }));
|
|
63
|
+
});
|
|
64
|
+
OcrReviewScreen.displayName = 'OcrReviewScreen';
|
|
65
|
+
export default OcrReviewScreen;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
export type OcrReviewState = 'default' | 'documentNumberMissing';
|
|
2
|
+
export interface OcrReviewStrings {
|
|
3
|
+
/** Accessible name for the logo nav region (i18n — no baked-in English). */
|
|
4
|
+
navLabel?: string;
|
|
5
|
+
/** "verified by" attribution copy for the footer tag. */
|
|
6
|
+
verifiedLabel: string;
|
|
7
|
+
/** `Review OCR Enable Edit` (31084:18792 / 18793 / 18794) — one screen, two
|
|
8
|
+
* states (`default`, `documentNumberMissing`). */
|
|
9
|
+
review: {
|
|
10
|
+
/** "Please check your data" */
|
|
11
|
+
title: string;
|
|
12
|
+
/** The asterisk suffix on every required field's label ("*"). */
|
|
13
|
+
requiredHint: string;
|
|
14
|
+
fullNameLabel: string;
|
|
15
|
+
dateOfBirthLabel: string;
|
|
16
|
+
genderLabel: string;
|
|
17
|
+
maleLabel: string;
|
|
18
|
+
femaleLabel: string;
|
|
19
|
+
documentNumberLabel: string;
|
|
20
|
+
/** "Field can't be empty" — Document number's error in `documentNumberMissing`. */
|
|
21
|
+
documentNumberRequiredError: string;
|
|
22
|
+
expiryDateLabel: string;
|
|
23
|
+
addressLabel: string;
|
|
24
|
+
/** "Continue" */
|
|
25
|
+
ctaLabel: string;
|
|
26
|
+
};
|
|
27
|
+
/** `1-18-1-id-hold-on`, redrawn for this module (see OcrReviewLoadingScreen.tsx). */
|
|
28
|
+
loading: {
|
|
29
|
+
/** "Hold on a sec.." */
|
|
30
|
+
title: string;
|
|
31
|
+
/** "We're verifying your identity" */
|
|
32
|
+
description: string;
|
|
33
|
+
};
|
|
34
|
+
/** `OCR Success` (31084:18796). */
|
|
35
|
+
success: {
|
|
36
|
+
/** "Identity successfully verified" */
|
|
37
|
+
title: string;
|
|
38
|
+
};
|
|
39
|
+
/** `OCR Error` (31084:18797) — off the "Processed successfully?" decision's
|
|
40
|
+
* "No" branch, drawn outside the Happy Path section. */
|
|
41
|
+
error: {
|
|
42
|
+
/** "Something went wrong" */
|
|
43
|
+
title: string;
|
|
44
|
+
/** "Try again" */
|
|
45
|
+
ctaLabel: string;
|
|
46
|
+
};
|
|
47
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// OCR Review module — copy contract.
|
|
2
|
+
//
|
|
3
|
+
// Every OCR Review screen receives the SAME `strings: OcrReviewStrings`
|
|
4
|
+
// object (rule: all copy via props, no hardcoded English — GUIDELINES.md §9).
|
|
5
|
+
//
|
|
6
|
+
// Authoritative screens: `ID Capture — Latest Design` file
|
|
7
|
+
// (U1EOfl9RQ1rOlOIuQw3rhL), section `OCR Review - 🍎 iOS - Full flow`
|
|
8
|
+
// (31084:18781) → `Happy Path` (31084:18782). Three `Review OCR Enable Edit`
|
|
9
|
+
// instances draw one screen in two states (filled, and Document number
|
|
10
|
+
// cleared + errored after an empty Continue press), `1-18-1-id-hold-on` is
|
|
11
|
+
// ID Capture's own wait screen redrawn here rather than reused by reference
|
|
12
|
+
// (see OcrReviewLoadingScreen.tsx — every module in this package owns its own
|
|
13
|
+
// hold-on-shaped screen; Digital ID Upload tried sharing one by reference and
|
|
14
|
+
// it was dropped, not kept), `OCR Success` and `OCR Error` (the latter OUTSIDE
|
|
15
|
+
// the Happy Path section, reached off the "Processed successfully?" decision's
|
|
16
|
+
// "No" branch) close the module on Archetype F.
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type PrizmaResultScreenProps } from './ResultScreen';
|
|
3
|
+
import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
|
|
4
|
+
import type { OcrReviewStrings } from './OcrReviewStrings';
|
|
5
|
+
import './ScreenLayout.css';
|
|
6
|
+
export interface OcrReviewSuccessScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'> {
|
|
7
|
+
/** Module copy — this screen reads the `success` slice. */
|
|
8
|
+
strings: OcrReviewStrings;
|
|
9
|
+
screenId?: string;
|
|
10
|
+
overrides?: PrizmaScreenOverrides;
|
|
11
|
+
onAction?: PrizmaScreenActionHandler;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* OCR Review — "Identity successfully verified", built on Archetype F
|
|
15
|
+
* (GUIDELINES.md §6-F, `PrizmaResultScreen`). Figma: `OCR Success` (31084:18796),
|
|
16
|
+
* the "Processed successfully?" decision's "Yes" branch — status mark + title
|
|
17
|
+
* alone, no CTA drawn (the frame hands off straight to the next module).
|
|
18
|
+
*
|
|
19
|
+
* Nav and footer tag are left at the archetype's DEFAULT (shown), matching
|
|
20
|
+
* every other module's success screen (`EkycSuccessScreen`, `EkybSuccessScreen`,
|
|
21
|
+
* `NfcSuccessScreen`, `FormsSuccessScreen`, …) — none of them hide header or
|
|
22
|
+
* footer. The Figma frame itself draws neither, but copying that as a
|
|
23
|
+
* per-screen override was wrong: hiding BOTH with no CTA band to balance it
|
|
24
|
+
* left nothing reserved at the bottom, so the status + title sat noticeably
|
|
25
|
+
* lower than the centred position every sibling success screen keeps (Mili,
|
|
26
|
+
* 2026-10-12 — checked against the system's own screens, not re-derived from
|
|
27
|
+
* the frame).
|
|
28
|
+
*/
|
|
29
|
+
export declare const OcrReviewSuccessScreen: React.ForwardRefExoticComponent<OcrReviewSuccessScreenProps & React.RefAttributes<HTMLDivElement>>;
|
|
30
|
+
export default OcrReviewSuccessScreen;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { PrizmaResultScreen } from './ResultScreen';
|
|
5
|
+
import './ScreenLayout.css';
|
|
6
|
+
/**
|
|
7
|
+
* OCR Review — "Identity successfully verified", built on Archetype F
|
|
8
|
+
* (GUIDELINES.md §6-F, `PrizmaResultScreen`). Figma: `OCR Success` (31084:18796),
|
|
9
|
+
* the "Processed successfully?" decision's "Yes" branch — status mark + title
|
|
10
|
+
* alone, no CTA drawn (the frame hands off straight to the next module).
|
|
11
|
+
*
|
|
12
|
+
* Nav and footer tag are left at the archetype's DEFAULT (shown), matching
|
|
13
|
+
* every other module's success screen (`EkycSuccessScreen`, `EkybSuccessScreen`,
|
|
14
|
+
* `NfcSuccessScreen`, `FormsSuccessScreen`, …) — none of them hide header or
|
|
15
|
+
* footer. The Figma frame itself draws neither, but copying that as a
|
|
16
|
+
* per-screen override was wrong: hiding BOTH with no CTA band to balance it
|
|
17
|
+
* left nothing reserved at the bottom, so the status + title sat noticeably
|
|
18
|
+
* lower than the centred position every sibling success screen keeps (Mili,
|
|
19
|
+
* 2026-10-12 — checked against the system's own screens, not re-derived from
|
|
20
|
+
* the frame).
|
|
21
|
+
*/
|
|
22
|
+
export const OcrReviewSuccessScreen = forwardRef(({ strings, screenId = 'ocr-review-success', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, status: "success", title: strings.success.title, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
|
|
23
|
+
OcrReviewSuccessScreen.displayName = 'OcrReviewSuccessScreen';
|
|
24
|
+
export default OcrReviewSuccessScreen;
|
|
@@ -3,7 +3,7 @@ import { type PrizmaResultScreenProps } from './ResultScreen';
|
|
|
3
3
|
import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
|
|
4
4
|
import type { PermissionsStrings } from './PermissionsStrings';
|
|
5
5
|
import './ScreenLayout.css';
|
|
6
|
-
export interface PermissionsAllowScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'ctaLabel' | 'linkLabel' | 'verifiedLabel' | 'navLabel'> {
|
|
6
|
+
export interface PermissionsAllowScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'ctaLabel' | 'linkLabel' | 'linkPosition' | 'verifiedLabel' | 'navLabel'> {
|
|
7
7
|
/** Family copy — this screen reads the `allow` slice. */
|
|
8
8
|
strings: PermissionsStrings;
|
|
9
9
|
screenId?: string;
|
|
@@ -29,16 +29,13 @@ export interface PermissionsAllowScreenProps extends Omit<PrizmaResultScreenProp
|
|
|
29
29
|
* `showHeader={false}` keeps the section's logo-free chrome (the flow has not
|
|
30
30
|
* started) with the nav row still reserved.
|
|
31
31
|
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
* it — F needs a `ctaOrder` slot alongside the `ctaOrientation` it already
|
|
40
|
-
* has, exactly as Geolocation escalated for the same reason. Borrowing
|
|
41
|
-
* `bandContent` to fake the position is the workaround #VS-17 rejected.
|
|
32
|
+
* "Quit process" sits ABOVE "Allow permission", as the frame draws it, through
|
|
33
|
+
* archetype F's `linkPosition="above"` (DEVIATIONS #GEN-3). Its sibling
|
|
34
|
+
* `PermissionsRequiredScreen` (archetype G) already renders that order.
|
|
35
|
+
*
|
|
36
|
+
* One thing Figma draws that this screen does not, reported rather than worked
|
|
37
|
+
* around: **the filled amber disc.** Core renders the canonical OUTLINE warning
|
|
38
|
+
* mark (icon-outline sweep, DEVIATIONS #15).
|
|
42
39
|
*/
|
|
43
40
|
export declare const PermissionsAllowScreen: React.ForwardRefExoticComponent<PermissionsAllowScreenProps & React.RefAttributes<HTMLDivElement>>;
|
|
44
41
|
export default PermissionsAllowScreen;
|
|
@@ -22,17 +22,14 @@ import './ScreenLayout.css';
|
|
|
22
22
|
* `showHeader={false}` keeps the section's logo-free chrome (the flow has not
|
|
23
23
|
* started) with the nav row still reserved.
|
|
24
24
|
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
* it — F needs a `ctaOrder` slot alongside the `ctaOrientation` it already
|
|
33
|
-
* has, exactly as Geolocation escalated for the same reason. Borrowing
|
|
34
|
-
* `bandContent` to fake the position is the workaround #VS-17 rejected.
|
|
25
|
+
* "Quit process" sits ABOVE "Allow permission", as the frame draws it, through
|
|
26
|
+
* archetype F's `linkPosition="above"` (DEVIATIONS #GEN-3). Its sibling
|
|
27
|
+
* `PermissionsRequiredScreen` (archetype G) already renders that order.
|
|
28
|
+
*
|
|
29
|
+
* One thing Figma draws that this screen does not, reported rather than worked
|
|
30
|
+
* around: **the filled amber disc.** Core renders the canonical OUTLINE warning
|
|
31
|
+
* mark (icon-outline sweep, DEVIATIONS #15).
|
|
35
32
|
*/
|
|
36
|
-
export const PermissionsAllowScreen = forwardRef(({ strings, screenId = 'permissions-allow', showHeader = false, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, showHeader: showHeader, status: "warning", title: strings.allow.title, subtitle: strings.allow.subtitle, ctaLabel: strings.allow.ctaLabel, linkLabel: strings.allow.quitLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
|
|
33
|
+
export const PermissionsAllowScreen = forwardRef(({ strings, screenId = 'permissions-allow', showHeader = false, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, showHeader: showHeader, status: "warning", title: strings.allow.title, subtitle: strings.allow.subtitle, ctaLabel: strings.allow.ctaLabel, linkLabel: strings.allow.quitLabel, linkPosition: "above", verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
|
|
37
34
|
PermissionsAllowScreen.displayName = 'PermissionsAllowScreen';
|
|
38
35
|
export default PermissionsAllowScreen;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type PrizmaScreenShellProps } from './ScreenShell';
|
|
3
|
+
import type { PrizmaScreenActionHandler } from './types';
|
|
4
|
+
import type { PermissionsStrings } from './PermissionsStrings';
|
|
5
|
+
import './ScreenLayout.css';
|
|
6
|
+
import './PermissionsLayout.css';
|
|
7
|
+
export interface PermissionsAskScreenProps extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
|
|
8
|
+
/** Family copy — this screen reads the `ask` slice. */
|
|
9
|
+
strings: PermissionsStrings;
|
|
10
|
+
/**
|
|
11
|
+
* How the ask is presented. `sheet` (default) is the phone frame's bottom
|
|
12
|
+
* sheet. `dialog` is Core's centred Modal, for a desktop browser window: a
|
|
13
|
+
* sheet pinned to the bottom of a wide window reads as a phone screen pasted
|
|
14
|
+
* on the page (Camila, 2026-10-07). Same copy, same two choices.
|
|
15
|
+
*/
|
|
16
|
+
presentation?: 'sheet' | 'dialog';
|
|
17
|
+
screenId?: string;
|
|
18
|
+
onAction?: PrizmaScreenActionHandler;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Permissions — the pre-permission sheet, "Allow camera access".
|
|
22
|
+
*
|
|
23
|
+
* Figma: `1-3-1-id-permission-modal` (qGJjfL4O0JSjz1x4tOjJn8), the first frame
|
|
24
|
+
* of all three full-flow boards (Web 3:620, iOS 3:7788, Android 4:11304). It is
|
|
25
|
+
* the SDK's own sheet, not the browser's prompt: Core's Bottom Sheet `dialog`
|
|
26
|
+
* (handle, title, supporting line) carrying a horizontal Button Group with
|
|
27
|
+
* "Don't allow" (secondary) left of "Allow" (primary), which is
|
|
28
|
+
* `horizontal-v1`'s order. "Allow" is what raises the real OS prompt.
|
|
29
|
+
*
|
|
30
|
+
* On desktop (`presentation="dialog"`) the same ask is Core's Modal `default`
|
|
31
|
+
* variant, centred over the scrim the way NFC's settings dialog is: Core
|
|
32
|
+
* renders the card and its Button Group (its own `vertical-v1` default, Allow
|
|
33
|
+
* over Don't allow), the screen adds only the scrim and the centring. No close
|
|
34
|
+
* icon: the two buttons are the only answers the ask has.
|
|
35
|
+
*
|
|
36
|
+
* Nothing is drawn behind the sheet: every board shows the sheet over an empty
|
|
37
|
+
* frame, so the screen is the scrim alone. Same scrim + panel split as
|
|
38
|
+
* Document Capture's method sheet (#DC-30).
|
|
39
|
+
*/
|
|
40
|
+
export declare const PermissionsAskScreen: React.ForwardRefExoticComponent<PermissionsAskScreenProps & React.RefAttributes<HTMLDivElement>>;
|
|
41
|
+
export default PermissionsAskScreen;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { PrizmaBottomSheetContent } from '@incodetech/prizma-core-web/bottom-sheet';
|
|
5
|
+
import { PrizmaModalContent } from '@incodetech/prizma-core-web/modal';
|
|
6
|
+
import { PrizmaScreenShell } from './ScreenShell';
|
|
7
|
+
import './ScreenLayout.css';
|
|
8
|
+
import './PermissionsLayout.css';
|
|
9
|
+
/**
|
|
10
|
+
* Permissions — the pre-permission sheet, "Allow camera access".
|
|
11
|
+
*
|
|
12
|
+
* Figma: `1-3-1-id-permission-modal` (qGJjfL4O0JSjz1x4tOjJn8), the first frame
|
|
13
|
+
* of all three full-flow boards (Web 3:620, iOS 3:7788, Android 4:11304). It is
|
|
14
|
+
* the SDK's own sheet, not the browser's prompt: Core's Bottom Sheet `dialog`
|
|
15
|
+
* (handle, title, supporting line) carrying a horizontal Button Group with
|
|
16
|
+
* "Don't allow" (secondary) left of "Allow" (primary), which is
|
|
17
|
+
* `horizontal-v1`'s order. "Allow" is what raises the real OS prompt.
|
|
18
|
+
*
|
|
19
|
+
* On desktop (`presentation="dialog"`) the same ask is Core's Modal `default`
|
|
20
|
+
* variant, centred over the scrim the way NFC's settings dialog is: Core
|
|
21
|
+
* renders the card and its Button Group (its own `vertical-v1` default, Allow
|
|
22
|
+
* over Don't allow), the screen adds only the scrim and the centring. No close
|
|
23
|
+
* icon: the two buttons are the only answers the ask has.
|
|
24
|
+
*
|
|
25
|
+
* Nothing is drawn behind the sheet: every board shows the sheet over an empty
|
|
26
|
+
* frame, so the screen is the scrim alone. Same scrim + panel split as
|
|
27
|
+
* Document Capture's method sheet (#DC-30).
|
|
28
|
+
*/
|
|
29
|
+
export const PermissionsAskScreen = forwardRef(({ strings, presentation = 'sheet', screenId = presentation === 'dialog' ? 'permissions-ask-dialog' : 'permissions-ask', onAction, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, "data-screen-id": screenId, "data-pcs-overlay": presentation === 'dialog' ? 'window' : undefined, ...shell, children: [_jsx("div", { className: "permissions-sheet-scrim", "aria-hidden": "true" }), presentation === 'dialog' ? (_jsx("div", { className: "permissions-dialog-panel", children: _jsx(PrizmaModalContent, { title: strings.ask.title, subtitle: strings.ask.subtitle, showCloseIcon: false, buttonGroupProps: {
|
|
30
|
+
primaryLabel: strings.ask.allowLabel,
|
|
31
|
+
secondaryLabel: strings.ask.denyLabel,
|
|
32
|
+
onPrimaryClick: () => onAction?.({ type: 'cta', screenId }),
|
|
33
|
+
onSecondaryClick: () => onAction?.({ type: 'secondary', screenId }),
|
|
34
|
+
} }) })) : (_jsx("div", { className: "permissions-sheet-panel", children: _jsx(PrizmaBottomSheetContent, { variant: "dialog", ariaLabel: strings.ask.title, title: strings.ask.title, subtitle: strings.ask.subtitle, buttonGroupProps: {
|
|
35
|
+
orientation: 'horizontal-v1',
|
|
36
|
+
primaryLabel: strings.ask.allowLabel,
|
|
37
|
+
secondaryLabel: strings.ask.denyLabel,
|
|
38
|
+
showTertiary: false,
|
|
39
|
+
onPrimaryClick: () => onAction?.({ type: 'cta', screenId }),
|
|
40
|
+
onSecondaryClick: () => onAction?.({ type: 'secondary', screenId }),
|
|
41
|
+
} }) }))] })));
|
|
42
|
+
PermissionsAskScreen.displayName = 'PermissionsAskScreen';
|
|
43
|
+
export default PermissionsAskScreen;
|