@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.
Files changed (168) hide show
  1. package/dist/BiometricConsentScreen.d.ts +95 -0
  2. package/dist/BiometricConsentScreen.js +91 -0
  3. package/dist/BiometricConsentStrings.d.ts +84 -0
  4. package/dist/BiometricConsentStrings.js +31 -0
  5. package/dist/CaptureScreen.d.ts +13 -0
  6. package/dist/CaptureScreen.js +2 -2
  7. package/dist/DemoScreensLayout.css +16 -0
  8. package/dist/DemoScreensRedirectScreen.d.ts +6 -1
  9. package/dist/DemoScreensRedirectScreen.js +3 -2
  10. package/dist/DemoScreensStrings.d.ts +5 -0
  11. package/dist/DigitalIdUploadErrorScreen.d.ts +31 -0
  12. package/dist/DigitalIdUploadErrorScreen.js +26 -0
  13. package/dist/DigitalIdUploadFileTooLargeScreen.d.ts +27 -0
  14. package/dist/DigitalIdUploadFileTooLargeScreen.js +21 -0
  15. package/dist/DigitalIdUploadReviewScreen.d.ts +57 -0
  16. package/dist/DigitalIdUploadReviewScreen.js +44 -0
  17. package/dist/DigitalIdUploadStrings.d.ts +64 -0
  18. package/dist/DigitalIdUploadStrings.js +19 -0
  19. package/dist/DigitalIdUploadTutorialScreen.d.ts +28 -0
  20. package/dist/DigitalIdUploadTutorialScreen.js +23 -0
  21. package/dist/DocumentCaptureIllustration.d.ts +1 -1
  22. package/dist/EkybCountryScreen.d.ts +6 -6
  23. package/dist/EkybCountryScreen.js +20 -7
  24. package/dist/EkybStrings.d.ts +6 -1
  25. package/dist/ErrorScreensScreen.d.ts +5 -2
  26. package/dist/ErrorScreensScreen.js +15 -4
  27. package/dist/ErrorScreensStrings.d.ts +17 -2
  28. package/dist/ErrorScreensStrings.js +18 -10
  29. package/dist/FaceCaptureCapturingScreen.d.ts +63 -0
  30. package/dist/FaceCaptureCapturingScreen.js +62 -2
  31. package/dist/FaceCaptureLayout.css +69 -4
  32. package/dist/FaceCaptureStrings.d.ts +23 -0
  33. package/dist/FormScreen.css +14 -0
  34. package/dist/FormScreen.d.ts +28 -0
  35. package/dist/FormScreen.js +3 -2
  36. package/dist/IdCaptureLayout.css +165 -2
  37. package/dist/IdCaptureStageScreen.d.ts +47 -0
  38. package/dist/IdCaptureStageScreen.js +39 -3
  39. package/dist/IdCaptureStrings.d.ts +19 -0
  40. package/dist/ListScreen.d.ts +19 -0
  41. package/dist/ListScreen.js +7 -2
  42. package/dist/LoaderScreen.d.ts +7 -5
  43. package/dist/LoaderScreen.js +7 -5
  44. package/dist/LoadersStrings.d.ts +18 -5
  45. package/dist/OcrReviewErrorScreen.d.ts +30 -0
  46. package/dist/OcrReviewErrorScreen.js +24 -0
  47. package/dist/OcrReviewLayout.css +24 -0
  48. package/dist/OcrReviewLoadingScreen.d.ts +25 -0
  49. package/dist/OcrReviewLoadingScreen.js +19 -0
  50. package/dist/OcrReviewScreen.d.ts +76 -0
  51. package/dist/OcrReviewScreen.js +65 -0
  52. package/dist/OcrReviewStrings.d.ts +47 -0
  53. package/dist/OcrReviewStrings.js +17 -0
  54. package/dist/OcrReviewSuccessScreen.d.ts +30 -0
  55. package/dist/OcrReviewSuccessScreen.js +24 -0
  56. package/dist/PermissionsAllowScreen.d.ts +8 -11
  57. package/dist/PermissionsAllowScreen.js +8 -11
  58. package/dist/PermissionsAskScreen.d.ts +41 -0
  59. package/dist/PermissionsAskScreen.js +43 -0
  60. package/dist/PermissionsBrowserStepsScreen.d.ts +9 -2
  61. package/dist/PermissionsBrowserStepsScreen.js +12 -3
  62. package/dist/PermissionsLayout.css +47 -0
  63. package/dist/PermissionsStrings.d.ts +20 -9
  64. package/dist/PermissionsStrings.js +10 -4
  65. package/dist/PhoneInputOtpScreen.d.ts +8 -0
  66. package/dist/PhoneInputOtpScreen.js +26 -19
  67. package/dist/PhoneInputStrings.d.ts +11 -3
  68. package/dist/PhoneInputVerifyScreen.js +21 -5
  69. package/dist/QualifiedSignatureDocumentScreen.d.ts +8 -5
  70. package/dist/QualifiedSignatureDocumentScreen.js +9 -6
  71. package/dist/QualifiedSignatureResultScreen.d.ts +16 -13
  72. package/dist/QualifiedSignatureResultScreen.js +17 -18
  73. package/dist/QualifiedSignatureStrings.d.ts +11 -4
  74. package/dist/ResultScreen.d.ts +8 -0
  75. package/dist/ResultScreen.js +14 -3
  76. package/dist/ReusabilityCredentialSelectionScreen.d.ts +95 -0
  77. package/dist/ReusabilityCredentialSelectionScreen.js +94 -0
  78. package/dist/ReusabilityLayout.css +241 -0
  79. package/dist/ReusabilityPrivacyPolicyScreen.d.ts +55 -0
  80. package/dist/ReusabilityPrivacyPolicyScreen.js +44 -0
  81. package/dist/ReusabilityStrings.d.ts +85 -0
  82. package/dist/ReusabilityStrings.js +37 -0
  83. package/dist/ReviewScreen.d.ts +38 -12
  84. package/dist/ReviewScreen.js +41 -8
  85. package/dist/ScreenLayout.css +382 -6
  86. package/dist/VideoSelfieErrorScreen.js +1 -1
  87. package/dist/VideoSelfieIdCaptureScreen.js +1 -1
  88. package/dist/VideoSelfieLayout.css +304 -2
  89. package/dist/VideoSelfieSelfieCaptureScreen.js +1 -1
  90. package/dist/VideoSelfieSpeakScreen.js +1 -1
  91. package/dist/VideoSelfieStrings.d.ts +4 -1
  92. package/dist/VideoSelfieTurnHeadScreen.js +14 -11
  93. package/dist/VideoSelfieTutorialScreen.d.ts +9 -0
  94. package/dist/VideoSelfieTutorialScreen.js +10 -1
  95. package/dist/VideoSelfieWaveScreen.js +1 -1
  96. package/dist/ViewfinderScreen.css +36 -0
  97. package/dist/flows.d.ts +8 -0
  98. package/dist/flows.js +17 -0
  99. package/dist/index.d.ts +16 -0
  100. package/dist/index.js +12 -0
  101. package/dist/styles.css +3 -0
  102. package/package.json +68 -3
  103. package/samples/video-selfie-camera-wide.jpg +0 -0
  104. package/samples/video-selfie-room-wide.jpg +0 -0
  105. package/src/BiometricConsentScreen.tsx +192 -0
  106. package/src/BiometricConsentStrings.ts +119 -0
  107. package/src/CaptureScreen.tsx +17 -0
  108. package/src/DemoScreensLayout.css +16 -0
  109. package/src/DemoScreensRedirectScreen.tsx +14 -6
  110. package/src/DemoScreensStrings.ts +5 -0
  111. package/src/DigitalIdUploadErrorScreen.tsx +83 -0
  112. package/src/DigitalIdUploadFileTooLargeScreen.tsx +67 -0
  113. package/src/DigitalIdUploadReviewScreen.tsx +119 -0
  114. package/src/DigitalIdUploadStrings.ts +88 -0
  115. package/src/DigitalIdUploadTutorialScreen.tsx +59 -0
  116. package/src/DocumentCaptureIllustration.tsx +1 -1
  117. package/src/EkybCountryScreen.tsx +23 -6
  118. package/src/EkybStrings.ts +6 -1
  119. package/src/ErrorScreensScreen.tsx +15 -4
  120. package/src/ErrorScreensStrings.ts +37 -12
  121. package/src/FaceCaptureCapturingScreen.tsx +102 -13
  122. package/src/FaceCaptureLayout.css +69 -4
  123. package/src/FaceCaptureStrings.ts +24 -0
  124. package/src/FormScreen.css +14 -0
  125. package/src/FormScreen.tsx +34 -0
  126. package/src/IdCaptureLayout.css +165 -2
  127. package/src/IdCaptureStageScreen.tsx +75 -0
  128. package/src/IdCaptureStrings.ts +19 -0
  129. package/src/ListScreen.tsx +48 -9
  130. package/src/LoaderScreen.tsx +7 -5
  131. package/src/LoadersStrings.ts +18 -5
  132. package/src/OcrReviewErrorScreen.tsx +53 -0
  133. package/src/OcrReviewLayout.css +24 -0
  134. package/src/OcrReviewLoadingScreen.tsx +48 -0
  135. package/src/OcrReviewScreen.tsx +190 -0
  136. package/src/OcrReviewStrings.ts +69 -0
  137. package/src/OcrReviewSuccessScreen.tsx +52 -0
  138. package/src/PermissionsAllowScreen.tsx +9 -10
  139. package/src/PermissionsAskScreen.tsx +105 -0
  140. package/src/PermissionsBrowserStepsScreen.tsx +11 -3
  141. package/src/PermissionsLayout.css +47 -0
  142. package/src/PermissionsStrings.ts +42 -12
  143. package/src/PhoneInputOtpScreen.tsx +23 -3
  144. package/src/PhoneInputStrings.ts +11 -3
  145. package/src/PhoneInputVerifyScreen.tsx +24 -4
  146. package/src/QualifiedSignatureDocumentScreen.tsx +9 -7
  147. package/src/QualifiedSignatureResultScreen.tsx +28 -26
  148. package/src/QualifiedSignatureStrings.ts +11 -4
  149. package/src/ResultScreen.tsx +33 -2
  150. package/src/ReusabilityCredentialSelectionScreen.tsx +246 -0
  151. package/src/ReusabilityLayout.css +241 -0
  152. package/src/ReusabilityPrivacyPolicyScreen.tsx +109 -0
  153. package/src/ReusabilityStrings.ts +127 -0
  154. package/src/ReviewScreen.tsx +96 -27
  155. package/src/ScreenLayout.css +382 -6
  156. package/src/VideoSelfieErrorScreen.tsx +1 -1
  157. package/src/VideoSelfieIdCaptureScreen.tsx +9 -1
  158. package/src/VideoSelfieLayout.css +304 -2
  159. package/src/VideoSelfieSelfieCaptureScreen.tsx +9 -1
  160. package/src/VideoSelfieSpeakScreen.tsx +9 -1
  161. package/src/VideoSelfieStrings.ts +4 -2
  162. package/src/VideoSelfieTurnHeadScreen.tsx +25 -14
  163. package/src/VideoSelfieTutorialScreen.tsx +11 -0
  164. package/src/VideoSelfieWaveScreen.tsx +9 -1
  165. package/src/ViewfinderScreen.css +36 -0
  166. package/src/flows.ts +25 -0
  167. package/src/index.ts +74 -3
  168. package/src/styles.css +3 -0
@@ -126,6 +126,25 @@ export interface IdCaptureStrings {
126
126
  /** Visually-hidden state announcements, per stage state — forwarded to
127
127
  * `PrizmaIdCapture.stateLabels`. */
128
128
  stateLabels?: Partial<Record<IdCaptureStageState, string>>;
129
+ /**
130
+ * stage.extendTime — the accessibility offer that rides the camera stage
131
+ * 20 s before auto-capture gives up and hands over to the shutter
132
+ * ("Need more time? / Manual capture starts in 20 s / Extend auto-capture").
133
+ * The same contract as Face Capture's `extendTime`: one feature, two
134
+ * modules, identical copy, so the locale overlay translates both at once.
135
+ *
136
+ * `description` is one localized sentence that CONTAINS the count, not a
137
+ * template — ten locales put the number in ten places. Optional: a host
138
+ * that has not localized it gets no notice rather than English.
139
+ */
140
+ extendTime?: {
141
+ /** Bold first line — "Need more time?" */
142
+ title: string;
143
+ /** "Manual capture starts in 20 s" — the count lives inside the copy. */
144
+ description: string;
145
+ /** The action that keeps the user on auto — "Extend auto-capture". */
146
+ linkLabel: string;
147
+ };
129
148
  };
130
149
 
131
150
  /** The on-camera feedback pills the error stages carry. */
@@ -74,6 +74,25 @@ export interface PrizmaListScreenProps
74
74
  * (common issues) and "Quit process" (permission). Figma draws Core's
75
75
  * `tertiary-link` composite in the band's top slot. */
76
76
  linkLabel?: string;
77
+ /**
78
+ * A SECOND tertiary link, under the first. Reusability's selection draws
79
+ * "What data will be shared?" over "Incode’s Privacy Policy" with no primary
80
+ * between them — two non-primary actions a host has to tell apart, so this
81
+ * one emits `tertiary` where `linkLabel` emits `secondary` (the #PI-10
82
+ * reasoning). Stacked at the band's flat Spacing/16 like everything else in
83
+ * it. Omit it and nothing renders, so every existing consumer is untouched.
84
+ * DEVIATIONS #RU-4.
85
+ */
86
+ secondaryLinkLabel?: string;
87
+ /**
88
+ * A shell-level layer painted OVER the whole screen — the same slot
89
+ * archetypes A and E carry (#F-32, #BC-8): a scrim plus Core's
90
+ * `PrizmaBottomSheetContent` or `PrizmaModalContent`, presented on top of the
91
+ * dimmed list. It cannot ride in the content column: it is absolutely
92
+ * positioned against the shell. Reusability's shared-details sheet is the
93
+ * first List consumer (DEVIATIONS #RU-5).
94
+ */
95
+ overlay?: ReactNode;
77
96
  /** "verified by" attribution copy for the footer tag. */
78
97
  verifiedLabel: string;
79
98
  navLabel?: string;
@@ -122,6 +141,8 @@ export const PrizmaListScreen = forwardRef<HTMLDivElement, PrizmaListScreenProps
122
141
  ctaLabel,
123
142
  secondaryCtaLabel,
124
143
  linkLabel,
144
+ secondaryLinkLabel,
145
+ overlay,
125
146
  verifiedLabel,
126
147
  navLabel,
127
148
  backLabel,
@@ -171,17 +192,34 @@ export const PrizmaListScreen = forwardRef<HTMLDivElement, PrizmaListScreenProps
171
192
  >
172
193
  {children}
173
194
  </div>
174
- {ctaLabel || secondaryCtaLabel || linkLabel || disclaimer ? (
195
+ {ctaLabel || secondaryCtaLabel || linkLabel || secondaryLinkLabel || disclaimer ? (
175
196
  <div className="prizma-screen-layout__band">
176
197
  {disclaimer ? <PrizmaDisclaimer text={disclaimer} /> : null}
177
- {linkLabel ? (
178
- <PrizmaButton
179
- variant="tertiary-link"
180
- size="L"
181
- onClick={() => onAction?.({ type: 'secondary', screenId })}
182
- >
183
- {linkLabel}
184
- </PrizmaButton>
198
+ {linkLabel || secondaryLinkLabel ? (
199
+ /* The links share ONE band slot, stacked flush: two 56px link
200
+ rows with the band's 16 between them read as two distant
201
+ lines (Camila, 2026-10-13); the row height is already the
202
+ touch target. ScreenLayout.css `__band__links`. */
203
+ <div className="prizma-screen-layout__band__links">
204
+ {linkLabel ? (
205
+ <PrizmaButton
206
+ variant="tertiary-link"
207
+ size="L"
208
+ onClick={() => onAction?.({ type: 'secondary', screenId })}
209
+ >
210
+ {linkLabel}
211
+ </PrizmaButton>
212
+ ) : null}
213
+ {secondaryLinkLabel ? (
214
+ <PrizmaButton
215
+ variant="tertiary-link"
216
+ size="L"
217
+ onClick={() => onAction?.({ type: 'tertiary', screenId })}
218
+ >
219
+ {secondaryLinkLabel}
220
+ </PrizmaButton>
221
+ ) : null}
222
+ </div>
185
223
  ) : null}
186
224
  {/* THE PRIMARY ALWAYS SITS ABOVE THE SECONDARY (owner rule
187
225
  2026-08-19, DEVIATIONS #GEO-1). The rule governs the
@@ -214,6 +252,7 @@ export const PrizmaListScreen = forwardRef<HTMLDivElement, PrizmaListScreenProps
214
252
  <PrizmaTag label={verifiedLabel} />
215
253
  </div>
216
254
  ) : null}
255
+ {overlay}
217
256
  </PrizmaScreenShell>
218
257
  ),
219
258
  );
@@ -23,11 +23,13 @@ export interface LoaderScreenProps
23
23
  * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
24
24
  *
25
25
  * Figma: `Module Generic Screens` frames `67:2388` ("Processing…") and
26
- * `67:3593` ("Just a moment…"). ONE screen for both, and for every module
27
- * loader after them: logo header → Core's spinner → status line → reassurance
28
- * line → the verified tag, with no CTA. The archetype already IS this recipe;
29
- * this component exists so the family has a name a designer can point at and a
30
- * copy contract a host can fill, not to add layout.
26
+ * `67:3593` ("Just a moment…"), plus the SDK's own "Hold on a sec…" wait that
27
+ * ID Capture, NFC and the Demo App show (`verifyingIdentity`). ONE screen for
28
+ * all of them, and for every module loader after them: logo header → Core's
29
+ * spinner → status line → reassurance line → the verified tag, with no CTA.
30
+ * The archetype already IS this recipe; this component exists so the family
31
+ * has a name a designer can point at and a copy contract a host can fill, not
32
+ * to add layout.
31
33
  *
32
34
  * Reach for `PrizmaResultScreen` the moment a wait screen needs a button — a
33
35
  * loader with a "Cancel" is a result screen, and the missing CTA band here is
@@ -15,12 +15,25 @@
15
15
  // No hardcoded English anywhere in a screen: every visible string arrives here.
16
16
 
17
17
  /**
18
- * The two frames in the generic file. They are the same screen with different
19
- * copy — which is the point of the family: the loader is a shape, and the two
20
- * entries here are examples of filling it, not a closed set. A module that
21
- * waits for something else supplies its own pair of strings under a new key.
18
+ * The copy pairs the family records. The loader is a shape, and each entry
19
+ * here is a way of filling it that more than one module already uses — not a
20
+ * closed set. A module that waits for something else supplies its own pair of
21
+ * strings under a new key.
22
+ *
23
+ * - `processing` — frame `67:2388`. "Processing…" over the generic
24
+ * reassurance line. Watchlist for Business, eKYC, eKYB,
25
+ * Email Input and the signatures all draw this title.
26
+ * - `validating` — frame `67:3593`. "Just a moment…", the documents
27
+ * are being validated.
28
+ * - `verifyingIdentity` — the SDK's own `loadingCircle.holdOn` wait: "Hold on
29
+ * a sec…" over "We're verifying your identity". ID
30
+ * Capture, NFC and the Demo App show it between the
31
+ * last capture and the verdict (Camila, 2026-10-09).
32
+ *
33
+ * Copy rule for every wait title: the ellipsis is the single `…` character,
34
+ * never two or three periods, so the same word reads the same in every module.
22
35
  */
23
- export type LoadersVariant = 'processing' | 'validating';
36
+ export type LoadersVariant = 'processing' | 'validating' | 'verifyingIdentity';
24
37
 
25
38
  export interface LoadersCopy {
26
39
  /** H2 status line ("Processing…"). */
@@ -0,0 +1,53 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
3
+ import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
4
+ import type { OcrReviewStrings } from './OcrReviewStrings';
5
+ import './ScreenLayout.css';
6
+
7
+ export interface OcrReviewErrorScreenProps
8
+ extends Omit<
9
+ PrizmaResultScreenProps,
10
+ 'status' | 'title' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
11
+ > {
12
+ /** Module copy — this screen reads the `error` slice. */
13
+ strings: OcrReviewStrings;
14
+ screenId?: string;
15
+ overrides?: PrizmaScreenOverrides;
16
+ onAction?: PrizmaScreenActionHandler;
17
+ }
18
+
19
+ /**
20
+ * OCR Review — "Something went wrong", built on Archetype F (GUIDELINES.md
21
+ * §6-F, `PrizmaResultScreen`). Figma: `OCR Error` (31084:18797), drawn OUTSIDE
22
+ * the Happy Path section and reached off the "Processed successfully?"
23
+ * decision's "No" branch — a plain status + title + "Try again" CTA.
24
+ *
25
+ * Nav and footer tag are left at the archetype's DEFAULT (shown). The frame
26
+ * itself draws neither, matching `DigitalIdUploadFileTooLargeScreen.tsx` —
27
+ * but that screen is the ONE exception in the whole package, not the pattern:
28
+ * every other error screen (`EkycErrorScreen`, `EkybErrorScreen`,
29
+ * `EmailInputErrorScreen`, `FormsErrorScreen`, `IdCaptureDocumentErrorScreen`)
30
+ * keeps both. Hiding them here, with only one CTA to balance the bottom,
31
+ * pushed the status + title below where every sibling error screen centres it
32
+ * (Mili, 2026-10-12 — checked against the system's own screens, not re-derived
33
+ * from the frame).
34
+ */
35
+ export const OcrReviewErrorScreen = forwardRef<HTMLDivElement, OcrReviewErrorScreenProps>(
36
+ ({ strings, screenId = 'ocr-review-error', overrides, onAction, ...shell }, ref) => (
37
+ <PrizmaResultScreen
38
+ ref={ref}
39
+ status="error"
40
+ title={strings.error.title}
41
+ ctaLabel={strings.error.ctaLabel}
42
+ verifiedLabel={strings.verifiedLabel}
43
+ navLabel={strings.navLabel}
44
+ screenId={screenId}
45
+ overrides={overrides}
46
+ onAction={onAction}
47
+ {...shell}
48
+ />
49
+ ),
50
+ );
51
+ OcrReviewErrorScreen.displayName = 'OcrReviewErrorScreen';
52
+
53
+ 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,48 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
3
+ import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
4
+ import type { OcrReviewStrings } from './OcrReviewStrings';
5
+ import './ScreenLayout.css';
6
+
7
+ export interface OcrReviewLoadingScreenProps
8
+ extends Omit<
9
+ PrizmaResultScreenProps,
10
+ 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
11
+ > {
12
+ /** Module copy — this screen reads the `loading` slice. */
13
+ strings: OcrReviewStrings;
14
+ screenId?: string;
15
+ overrides?: PrizmaScreenOverrides;
16
+ onAction?: PrizmaScreenActionHandler;
17
+ }
18
+
19
+ /**
20
+ * OCR Review — server-side verification wait ("Hold on a sec…"). Figma:
21
+ * `1-18-1-id-hold-on` (31084:18795) — ID Capture's own frame, redrawn here
22
+ * rather than imported by reference: every module in this package owns its
23
+ * hold-on-shaped screen independently (`IdCaptureHoldOnScreen.tsx` is ID
24
+ * Capture's), and a cross-module import was tried once (Digital ID Upload)
25
+ * and dropped rather than kept.
26
+ *
27
+ * Archetype C (§6-C), `PrizmaResultScreen` with `status="loading"` and no CTA
28
+ * — identical shape to `IdCaptureHoldOnScreen.tsx`.
29
+ */
30
+ export const OcrReviewLoadingScreen = forwardRef<HTMLDivElement, OcrReviewLoadingScreenProps>(
31
+ ({ strings, screenId = 'ocr-review-loading', overrides, onAction, ...shell }, ref) => (
32
+ <PrizmaResultScreen
33
+ ref={ref}
34
+ status="loading"
35
+ title={strings.loading.title}
36
+ subtitle={strings.loading.description}
37
+ verifiedLabel={strings.verifiedLabel}
38
+ navLabel={strings.navLabel}
39
+ screenId={screenId}
40
+ overrides={overrides}
41
+ onAction={onAction}
42
+ {...shell}
43
+ />
44
+ ),
45
+ );
46
+ OcrReviewLoadingScreen.displayName = 'OcrReviewLoadingScreen';
47
+
48
+ export default OcrReviewLoadingScreen;
@@ -0,0 +1,190 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
3
+ import { PrizmaDateField } from '@incodetech/prizma-core-web/date-field';
4
+ import { PrizmaRadio } from '@incodetech/prizma-core-web/radio';
5
+ import { PrizmaRadioGroup } from '@incodetech/prizma-core-web/radio-group';
6
+ import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
7
+ import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
8
+ import type { OcrReviewState, OcrReviewStrings } from './OcrReviewStrings';
9
+ import './ScreenLayout.css';
10
+ import './OcrReviewLayout.css';
11
+
12
+ export interface OcrReviewScreenProps
13
+ extends Omit<
14
+ PrizmaFormScreenProps,
15
+ 'title' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel' | 'scrollFields'
16
+ > {
17
+ /** Module copy — this screen reads the `review` slice. */
18
+ strings: OcrReviewStrings;
19
+ /** Which `Review OCR Enable Edit` instance to render. Default `default`.
20
+ * Ignored when `editable` is `false` — the disabled frame draws none of
21
+ * these states (there is nothing to submit wrong when nothing can be
22
+ * typed). */
23
+ state?: OcrReviewState;
24
+ /**
25
+ * `Review OCR Enable Edit` vs `Review OCR Disable Edit` (30530:119373) — the
26
+ * module's own boolean axis, orthogonal to `state`. `false` renders every
27
+ * field `disabled` (Core's grey surface + dimmed text, same prop
28
+ * `PrizmaTextField` / `PrizmaDateField` / `PrizmaRadioGroup` already ship)
29
+ * with no required asterisks (the frame hides them — nothing to validate on
30
+ * a field nobody can edit) while Continue stays enabled. Default `true`.
31
+ */
32
+ editable?: boolean;
33
+ /** The subject photo — Figma's `Image / Selfie`, 90×90 circular. */
34
+ photoSrc: string;
35
+ /** Field values the fields start with. Every field is uncontrolled
36
+ * (`defaultValue`) — a screen is one static spec state, same rule
37
+ * `EkycDetailsScreen` draws (#PI-6). */
38
+ values?: {
39
+ fullName?: string;
40
+ dateOfBirth?: string;
41
+ gender?: 'male' | 'female';
42
+ documentNumber?: string;
43
+ expiryDate?: string;
44
+ address?: string;
45
+ };
46
+ screenId?: string;
47
+ overrides?: PrizmaScreenOverrides;
48
+ onAction?: PrizmaScreenActionHandler;
49
+ }
50
+
51
+ /**
52
+ * OCR Review — "Please check your data", built on the Form archetype
53
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
54
+ *
55
+ * ONE screen for both drawn states: `default` (31084:18792 / 18794 — every
56
+ * field filled, Continue enabled) and `documentNumberMissing` (31084:18793 —
57
+ * every OTHER field keeps its filled value, only Document number is cleared
58
+ * and carries Core's `error` + `documentNumberRequiredError`). Unlike eKYC's
59
+ * `emptyError` (every required field clears and errors together), this frame
60
+ * draws a SINGLE field in that state — the empty-submit rule still applies,
61
+ * scoped to the one field Figma actually shows failing it.
62
+ *
63
+ * The photo sits ABOVE Full name as the field stack's own first row — Figma's
64
+ * `input-list` draws it at the same Spacing/16 rhythm as every field below it.
65
+ * It is the field stack's plain FIRST CHILD, nothing more: `PrizmaFormScreen`
66
+ * already renders whatever `children` hands it with that same gap, so this
67
+ * needed no new slot on the archetype (the archetype is untouched).
68
+ *
69
+ * Date of birth and Expiry date are both Core's `PrizmaDateField` — the
70
+ * frame's "Dropdown" instance name is the shared component's internal name for
71
+ * a date-kind field, not a literal dropdown (same reading `EkycDetailsScreen`
72
+ * gives its own Date of birth field). Gender is Core's `PrizmaRadioGroup` +
73
+ * `PrizmaRadio` — first real consumer of either in this package.
74
+ *
75
+ * The field stack SCROLLS (`scrollFields`, the same archetype prop eKYB's
76
+ * `EkybOwnersScreen`, Forms' long form and Qualified Signature's accept screen
77
+ * already use): the photo plus six fields do not fit an 844 frame without it,
78
+ * and without the release the Address row paints under the CTA instead of
79
+ * above it. Not a prop a caller picks — this module always needs it, so it is
80
+ * omitted from `OcrReviewScreenProps` and hardcoded here, matching those three
81
+ * precedents. `Review OCR Disable Edit` overflows the same way (its own
82
+ * `input-list` measures 654 against a 448 middle container) — one more reason
83
+ * `editable` is a prop of this same screen rather than a second component.
84
+ */
85
+ export const OcrReviewScreen = forwardRef<HTMLDivElement, OcrReviewScreenProps>(
86
+ (
87
+ {
88
+ strings,
89
+ state = 'default',
90
+ editable = true,
91
+ photoSrc,
92
+ values,
93
+ screenId = editable ? `ocr-review-${state}` : 'ocr-review-disabled',
94
+ ctaDisabled,
95
+ className,
96
+ overrides,
97
+ onAction,
98
+ ...shell
99
+ },
100
+ ref,
101
+ ) => {
102
+ // The empty-submit retry only exists on the editable frame — nothing can
103
+ // be left empty on a field nobody can type into.
104
+ const documentNumberMissing = editable && state === 'documentNumberMissing';
105
+ const documentNumberError = documentNumberMissing
106
+ ? { error: true, errorText: strings.review.documentNumberRequiredError }
107
+ : {};
108
+ // `Review OCR Disable Edit` hides every required asterisk (31256:169923 is
109
+ // marked `hidden` on its own Gender row) — spread onto every field only
110
+ // when editable, rather than a `required={editable}` on each that would
111
+ // still render an empty, pointless suffix slot.
112
+ const requiredProps = editable
113
+ ? { required: true, requiredHint: strings.review.requiredHint }
114
+ : {};
115
+
116
+ return (
117
+ <PrizmaFormScreen
118
+ ref={ref}
119
+ className={className}
120
+ title={strings.review.title}
121
+ ctaLabel={strings.review.ctaLabel}
122
+ ctaDisabled={ctaDisabled}
123
+ verifiedLabel={strings.verifiedLabel}
124
+ navLabel={strings.navLabel}
125
+ screenId={screenId}
126
+ overrides={overrides}
127
+ onAction={onAction}
128
+ /* The archetype's own scrolling field stack — the photo plus six
129
+ fields do not fit an 844 frame. No module CSS. */
130
+ scrollFields
131
+ {...shell}
132
+ >
133
+ <div className="ocr-review__photo">
134
+ <img src={photoSrc} alt="" />
135
+ </div>
136
+ <PrizmaTextField
137
+ label={strings.review.fullNameLabel}
138
+ {...requiredProps}
139
+ disabled={!editable}
140
+ defaultValue={values?.fullName ?? ''}
141
+ autoComplete="off"
142
+ clearable={false}
143
+ />
144
+ <PrizmaDateField
145
+ label={strings.review.dateOfBirthLabel}
146
+ {...requiredProps}
147
+ disabled={!editable}
148
+ defaultValue={values?.dateOfBirth ?? ''}
149
+ autoComplete="off"
150
+ />
151
+ <PrizmaRadioGroup
152
+ name={`${screenId}-gender`}
153
+ legend={strings.review.genderLabel}
154
+ defaultValue={values?.gender}
155
+ disabled={!editable}
156
+ >
157
+ <PrizmaRadio textSize="m" value="male" text={strings.review.maleLabel} />
158
+ <PrizmaRadio textSize="m" value="female" text={strings.review.femaleLabel} />
159
+ </PrizmaRadioGroup>
160
+ <PrizmaTextField
161
+ label={strings.review.documentNumberLabel}
162
+ {...requiredProps}
163
+ {...documentNumberError}
164
+ disabled={!editable}
165
+ defaultValue={documentNumberMissing ? '' : values?.documentNumber ?? ''}
166
+ autoComplete="off"
167
+ clearable={false}
168
+ />
169
+ <PrizmaDateField
170
+ label={strings.review.expiryDateLabel}
171
+ {...requiredProps}
172
+ disabled={!editable}
173
+ defaultValue={values?.expiryDate ?? ''}
174
+ autoComplete="off"
175
+ />
176
+ <PrizmaTextField
177
+ label={strings.review.addressLabel}
178
+ {...requiredProps}
179
+ disabled={!editable}
180
+ defaultValue={values?.address ?? ''}
181
+ autoComplete="off"
182
+ clearable={false}
183
+ />
184
+ </PrizmaFormScreen>
185
+ );
186
+ },
187
+ );
188
+ OcrReviewScreen.displayName = 'OcrReviewScreen';
189
+
190
+ export default OcrReviewScreen;
@@ -0,0 +1,69 @@
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
+
18
+ export type OcrReviewState = 'default' | 'documentNumberMissing';
19
+
20
+ export interface OcrReviewStrings {
21
+ /** Accessible name for the logo nav region (i18n — no baked-in English). */
22
+ navLabel?: string;
23
+ /** "verified by" attribution copy for the footer tag. */
24
+ verifiedLabel: string;
25
+
26
+ /** `Review OCR Enable Edit` (31084:18792 / 18793 / 18794) — one screen, two
27
+ * states (`default`, `documentNumberMissing`). */
28
+ review: {
29
+ /** "Please check your data" */
30
+ title: string;
31
+ /** The asterisk suffix on every required field's label ("*"). */
32
+ requiredHint: string;
33
+ fullNameLabel: string;
34
+ dateOfBirthLabel: string;
35
+ genderLabel: string;
36
+ maleLabel: string;
37
+ femaleLabel: string;
38
+ documentNumberLabel: string;
39
+ /** "Field can't be empty" — Document number's error in `documentNumberMissing`. */
40
+ documentNumberRequiredError: string;
41
+ expiryDateLabel: string;
42
+ addressLabel: string;
43
+ /** "Continue" */
44
+ ctaLabel: string;
45
+ };
46
+
47
+ /** `1-18-1-id-hold-on`, redrawn for this module (see OcrReviewLoadingScreen.tsx). */
48
+ loading: {
49
+ /** "Hold on a sec.." */
50
+ title: string;
51
+ /** "We're verifying your identity" */
52
+ description: string;
53
+ };
54
+
55
+ /** `OCR Success` (31084:18796). */
56
+ success: {
57
+ /** "Identity successfully verified" */
58
+ title: string;
59
+ };
60
+
61
+ /** `OCR Error` (31084:18797) — off the "Processed successfully?" decision's
62
+ * "No" branch, drawn outside the Happy Path section. */
63
+ error: {
64
+ /** "Something went wrong" */
65
+ title: string;
66
+ /** "Try again" */
67
+ ctaLabel: string;
68
+ };
69
+ }
@@ -0,0 +1,52 @@
1
+ import React, { forwardRef } from 'react';
2
+ import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
3
+ import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
4
+ import type { OcrReviewStrings } from './OcrReviewStrings';
5
+ import './ScreenLayout.css';
6
+
7
+ export interface OcrReviewSuccessScreenProps
8
+ extends Omit<
9
+ PrizmaResultScreenProps,
10
+ 'status' | 'title' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
11
+ > {
12
+ /** Module copy — this screen reads the `success` slice. */
13
+ strings: OcrReviewStrings;
14
+ screenId?: string;
15
+ overrides?: PrizmaScreenOverrides;
16
+ onAction?: PrizmaScreenActionHandler;
17
+ }
18
+
19
+ /**
20
+ * OCR Review — "Identity successfully verified", built on Archetype F
21
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`). Figma: `OCR Success` (31084:18796),
22
+ * the "Processed successfully?" decision's "Yes" branch — status mark + title
23
+ * alone, no CTA drawn (the frame hands off straight to the next module).
24
+ *
25
+ * Nav and footer tag are left at the archetype's DEFAULT (shown), matching
26
+ * every other module's success screen (`EkycSuccessScreen`, `EkybSuccessScreen`,
27
+ * `NfcSuccessScreen`, `FormsSuccessScreen`, …) — none of them hide header or
28
+ * footer. The Figma frame itself draws neither, but copying that as a
29
+ * per-screen override was wrong: hiding BOTH with no CTA band to balance it
30
+ * left nothing reserved at the bottom, so the status + title sat noticeably
31
+ * lower than the centred position every sibling success screen keeps (Mili,
32
+ * 2026-10-12 — checked against the system's own screens, not re-derived from
33
+ * the frame).
34
+ */
35
+ export const OcrReviewSuccessScreen = forwardRef<HTMLDivElement, OcrReviewSuccessScreenProps>(
36
+ ({ strings, screenId = 'ocr-review-success', overrides, onAction, ...shell }, ref) => (
37
+ <PrizmaResultScreen
38
+ ref={ref}
39
+ status="success"
40
+ title={strings.success.title}
41
+ verifiedLabel={strings.verifiedLabel}
42
+ navLabel={strings.navLabel}
43
+ screenId={screenId}
44
+ overrides={overrides}
45
+ onAction={onAction}
46
+ {...shell}
47
+ />
48
+ ),
49
+ );
50
+ OcrReviewSuccessScreen.displayName = 'OcrReviewSuccessScreen';
51
+
52
+ export default OcrReviewSuccessScreen;
@@ -13,6 +13,7 @@ export interface PermissionsAllowScreenProps
13
13
  | 'glyph'
14
14
  | 'ctaLabel'
15
15
  | 'linkLabel'
16
+ | 'linkPosition'
16
17
  | 'verifiedLabel'
17
18
  | 'navLabel'
18
19
  > {
@@ -42,16 +43,13 @@ export interface PermissionsAllowScreenProps
42
43
  * `showHeader={false}` keeps the section's logo-free chrome (the flow has not
43
44
  * started) with the nav row still reserved.
44
45
  *
45
- * TWO things Figma draws that this screen does not, both reported rather than
46
- * worked around:
47
- * - **The filled amber disc.** Core renders the canonical OUTLINE warning mark
48
- * (icon-outline sweep, DEVIATIONS #15).
49
- * - **"Quit process" above the CTA.** Archetype F renders its tertiary link
50
- * BELOW the button stack (`ResultScreen.tsx`), so this screen ships inverted
51
- * against its frame. The archetype owns the order and no screen re-declares
52
- * it — F needs a `ctaOrder` slot alongside the `ctaOrientation` it already
53
- * has, exactly as Geolocation escalated for the same reason. Borrowing
54
- * `bandContent` to fake the position is the workaround #VS-17 rejected.
46
+ * "Quit process" sits ABOVE "Allow permission", as the frame draws it, through
47
+ * archetype F's `linkPosition="above"` (DEVIATIONS #GEN-3). Its sibling
48
+ * `PermissionsRequiredScreen` (archetype G) already renders that order.
49
+ *
50
+ * One thing Figma draws that this screen does not, reported rather than worked
51
+ * around: **the filled amber disc.** Core renders the canonical OUTLINE warning
52
+ * mark (icon-outline sweep, DEVIATIONS #15).
55
53
  */
56
54
  export const PermissionsAllowScreen = forwardRef<
57
55
  HTMLDivElement,
@@ -76,6 +74,7 @@ export const PermissionsAllowScreen = forwardRef<
76
74
  subtitle={strings.allow.subtitle}
77
75
  ctaLabel={strings.allow.ctaLabel}
78
76
  linkLabel={strings.allow.quitLabel}
77
+ linkPosition="above"
79
78
  verifiedLabel={strings.verifiedLabel}
80
79
  navLabel={strings.navLabel}
81
80
  screenId={screenId}