@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/src/VideoSelfieIdCaptureScreen.tsx

@@ -3,15 +3,18 @@ import {
   PrizmaIdCapture,
   type PrizmaIdCaptureState,
 } from '@incodetech/prizma-core-web/id-capture';
+import { PrizmaCaptureFeedback } from '@incodetech/prizma-core-web/capture-feedback';
 import { PrizmaLoadingSpinner } from '@incodetech/prizma-core-web/loading-spinner';
-import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
 import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
 import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
 import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type {
   VideoSelfieDocumentType,
-    VideoSelfieIdErrorSeverity,
+  VideoSelfieIdCondition,
+  VideoSelfieIdErrorReason,
+  VideoSelfieIdErrorSeverity,
   VideoSelfieIdSide,
   VideoSelfieStrings,
 } from './VideoSelfieStrings';
@@ -19,13 +22,52 @@ import './ScreenLayout.css';
 import './ViewfinderScreen.css';
 import './VideoSelfieLayout.css';
 
-/** Which purple stage section to render (groups 3, 5 and 6). */
+/** Which purple stage section to render (groups 3, 5 and 6), plus the live
+ *  coaching beat the full-flow frames draw between them. */
 export type VideoSelfieIdCaptureState =
   | 'default'
   | 'shown'
   | 'processing'
   | 'allGood'
-  | 'error';
+  | 'error'
+  | 'condition';
+
+/**
+ * Condition → the Core treatment that already exists for it.
+ *
+ * Four are `PrizmaIdCapture`'s own error states. `blurry` is the plain error
+ * border: blur is a DETECTION result, not a framing mistake, and the owner's
+ * 2026-07-28 call is that those pair the plain border with the feedback
+ * bubble rather than inventing a semantic overlay (`IdCapture.tsx`, the note
+ * above `error`). Either way the message is the bubble's, never the frame's.
+ */
+const CONDITION_STATE: Record<VideoSelfieIdCondition, PrizmaIdCaptureState> = {
+  wrongSide: 'error-wrong-side',
+  notAligned: 'error-not-aligned',
+  glare: 'error-glare',
+  tooDark: 'error-too-dark',
+  blurry: 'error',
+};
+
+/** Condition → the bubble's own variant. All six of Core's are used: the
+ *  wrong-side bubble names the face the user SHOULD be showing, so it flips
+ *  with the leg — `show-front` on the front, `show-back` on the back. */
+const CONDITION_FEEDBACK: Record<
+  VideoSelfieIdCondition,
+  'not-aligned' | 'blurry' | 'glare' | 'too-dark'
+> = {
+  wrongSide: 'not-aligned', // unused — the wrong-side variant is side-keyed below
+  notAligned: 'not-aligned',
+  blurry: 'blurry',
+  glare: 'glare',
+  tooDark: 'too-dark',
+};
+
+/** The wrong-side bubble, per leg. */
+const WRONG_SIDE_FEEDBACK: Record<VideoSelfieIdSide, 'show-front' | 'show-back'> = {
+  front: 'show-front',
+  back: 'show-back',
+};
 
 /** Purple stage state → Core `PrizmaIdCapture` state. The frame border, the
  *  analyzing sweep, the scrim and the encrypted row are ALL Core's. */
@@ -35,6 +77,8 @@ const CAPTURE_STATE: Record<VideoSelfieIdCaptureState, PrizmaIdCaptureState> = {
   processing: 'analyzing',
   allGood: 'success',
   error: 'error',
+  // Replaced per-condition below — the map needs an entry for every key.
+  condition: 'error',
 };
 
 /** Which beat of the seven-step journey each side occupies — front is step 2
@@ -56,6 +100,12 @@ export interface VideoSelfieIdCaptureScreenProps
   /** Whether the rejection invites a retry (`6.1`/`6.3`) or is terminal
    *  (`6.2`/`6.4`). Read only when `state="error"`. */
   errorSeverity?: VideoSelfieIdErrorSeverity;
+  /** WHY the read was rejected — the `.1`–`.4` suffix of the group 6 section.
+   *  Read only when `state="error"`. Default `scan`. */
+  errorReason?: VideoSelfieIdErrorReason;
+  /** Which live condition to coach the user out of. Read only when
+   *  `state="condition"`. Default `notAligned`. */
+  condition?: VideoSelfieIdCondition;
   /** Live camera feed (<video>) or sample still (<img>) behind the frame. */
   camera?: ReactNode;
   /** The captured document still, for the states Core draws one in. */
@@ -118,6 +168,8 @@ export const VideoSelfieIdCaptureScreen = forwardRef<
       documentType = 'id',
       state = 'default',
       errorSeverity = 'tryAgain',
+      errorReason = 'scan',
+      condition = 'notAligned',
       camera,
       still,
       screenId = `video-selfie-id-capture-${side}-${state}`,
@@ -128,10 +180,26 @@ export const VideoSelfieIdCaptureScreen = forwardRef<
     },
     ref,
   ) => {
-    const errorLabel = strings.idCapture.errors[errorSeverity];
+    const errorLabel = strings.idCapture.errors[errorReason][errorSeverity];
+    /* Only the wrong-side bubble is keyed by side — it is the one that names
+       the face to show. The other four describe the shot. */
+    const conditionCopy =
+      condition === 'wrongSide'
+        ? strings.idCapture.conditions.wrongSide[side]
+        : strings.idCapture.conditions[condition];
+    const conditionFeedback =
+      condition === 'wrongSide' ? WRONG_SIDE_FEEDBACK[side] : CONDITION_FEEDBACK[condition];
 
     return (
-      <PrizmaScreenShell ref={ref} dark className={className} {...shell}>
+      <PrizmaScreenShell
+        ref={ref}
+        dark
+        /* The camera owns the whole window, never a column of it — see the
+           contract note in `VideoSelfieLayout.css`. */
+        data-pcs-overlay="window"
+        className={className}
+        {...shell}
+      >
         <div className="prizma-viewfinder__surface">{camera}</div>
         <div className="video-selfie-stepper">
           <PrizmaStepper
@@ -149,50 +217,76 @@ export const VideoSelfieIdCaptureScreen = forwardRef<
             .filter(Boolean)
             .join(' ')}
         >
-          <div className="video-selfie-band" />
+          {/* The frame is CENTRED in the air between the stepper and the tag,
+              not bottom-anchored: Figma seats `ID Capture Frame` at y 172–627
+              of a 91–708 content area, dead centre. One flexible band either
+              side is the whole geometry — no offset is declared. */}
+          {/* The coaching bubble sits in the band ABOVE the frame, which is
+              where the five condition frames draw it — Core's own
+              `PrizmaCaptureFeedback`, the same piece ID Capture's stage uses
+              for the same job (`IdCaptureStageScreen`). The frame underneath
+              takes the matching red treatment, so the two say one thing:
+              what is wrong, and what to do about it. */}
+          <div className="video-selfie-band">
+            {state === 'condition' ? (
+              <div className="video-selfie-feedback">
+                <PrizmaCaptureFeedback
+                  feedback={conditionFeedback}
+                  title={conditionCopy.title}
+                  subtitle={conditionCopy.subtitle}
+                />
+              </div>
+            ) : null}
+          </div>
           <PrizmaIdCapture
+            className="video-selfie-stage"
             type={documentType}
-            state={CAPTURE_STATE[state]}
+            state={state === 'condition' ? CONDITION_STATE[condition] : CAPTURE_STATE[state]}
             isVertical
             mode="overlay"
             scrim
             showEncryptedLabel={false}
             still={still}
           />
+          <div className="video-selfie-band" />
           {/* Centred ON the frame, not below it — `3.2`/`5.2` put the spinner
               and its caption over the document (DEVIATIONS #VS-7). */}
           {state === 'processing' ? (
             <div className="video-selfie-stage-status">
-              <PrizmaLoadingSpinner
-                showTitle
-                titleText={strings.idCapture.processingLabel}
-                loadingLabel={strings.idCapture.processingLabel}
-              />
+              <div className="video-selfie-stage-status__card">
+                <PrizmaLoadingSpinner
+                  showTitle
+                  titleText={strings.idCapture.processingLabel}
+                  loadingLabel={strings.idCapture.processingLabel}
+                />
+              </div>
             </div>
           ) : null}
           {/* `3.3`/`5.3` and every `6.x` draw the verdict in the SAME dark card,
               centred on the document, as `3.2`/`5.2` draw the spinner — three
               identical Figma treatments had become two different ones once the
-              spinner moved (owner QA 2026-08-19). DEVIATIONS #VS-13. */}
+              spinner moved (owner QA 2026-08-19). DEVIATIONS #VS-13.
+
+              The card's CONTENT is Core's `PrizmaTitle` with its status icon,
+              not a Snackbar: Figma stacks the mark ABOVE the label, centred,
+              with the label free to wrap onto two or three lines ("ID photo
+              verification failed, try again"). A Snackbar is a one-line ROW —
+              icon beside text — so it printed the copy across the full column
+              and had to be told, by a prop, whether its own text would wrap
+              (#VS-9). The stacked status block is what Core already ships for
+              this shape, and it is the same piece the liveness ring uses on
+              the same beat. DEVIATIONS #VS-19. */}
           {state === 'allGood' || state === 'error' ? (
             <div className="video-selfie-stage-status">
-              {state === 'allGood' ? (
-                <PrizmaSnackbar state="success" role="status">
-                  {strings.idCapture.successLabel}
-                </PrizmaSnackbar>
-              ) : (
-                /* NOT `isMultiline`: that modifier switches the row to
-                 `align-items: flex-start` so an icon anchors to the top of
-                 WRAPPED text. The rejection copy renders on ONE line, so it
-                 only pushed the icon 6.9px below the text centre
-                 (owner-reported 2026-08-19: "the text is not even aligned to
-                 the icon"). CORE REQUEST: have the Snackbar follow actual
-                 wrapping rather than a prop the caller has to predict.
-                 DEVIATIONS #VS-9. */
-                <PrizmaSnackbar state="error" role="alert">
-                  {errorLabel}
-                </PrizmaSnackbar>
-              )}
+              <div
+                className="video-selfie-stage-status__card"
+                role={state === 'error' ? 'alert' : 'status'}
+              >
+                <PrizmaTitle
+                  title={state === 'allGood' ? strings.idCapture.successLabel : errorLabel}
+                  icon={{ type: 'status', status: state === 'allGood' ? 'success' : 'error' }}
+                />
+              </div>
             </div>
           ) : null}
         </div>