@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/dist/VideoSelfieIdCaptureScreen.js

@@ -2,14 +2,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { PrizmaIdCapture, } 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 } from './ScreenShell';
 import './ScreenLayout.css';
 import './ViewfinderScreen.css';
 import './VideoSelfieLayout.css';
+/**
+ * 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 = {
+    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 = {
+    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 = {
+    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. */
 const CAPTURE_STATE = {
@@ -18,6 +50,8 @@ const CAPTURE_STATE = {
     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
  *  (the microphone grant is step 1), back is step 3. */
@@ -64,23 +98,20 @@ const STEP = { front: 2, back: 3 };
  * dropped from `VideoSelfieStrings` with it — no other screen in the module
  * reads one.
  */
-export const VideoSelfieIdCaptureScreen = forwardRef(({ strings, side = 'front', documentType = 'id', state = 'default', errorSeverity = 'tryAgain', camera, still, screenId = `video-selfie-id-capture-${side}-${state}`, overrides, onAction, className, ...shell }, ref) => {
-    const errorLabel = strings.idCapture.errors[errorSeverity];
-    return (_jsxs(PrizmaScreenShell, { ref: ref, dark: true, className: className, ...shell, children: [_jsx("div", { className: "prizma-viewfinder__surface", children: camera }), _jsx("div", { className: "video-selfie-stepper", children: _jsx(PrizmaStepper, { steps: 7, currentState: STEP[side], documentType: documentType, completedValueText: strings.stepperCompletedLabel }) }), _jsxs("div", { className: [
+export const VideoSelfieIdCaptureScreen = forwardRef(({ strings, side = 'front', documentType = 'id', state = 'default', errorSeverity = 'tryAgain', errorReason = 'scan', condition = 'notAligned', camera, still, screenId = `video-selfie-id-capture-${side}-${state}`, overrides, onAction, className, ...shell }, ref) => {
+    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 (_jsxs(PrizmaScreenShell, { ref: ref, dark: true, "data-pcs-overlay": "window", className: className, ...shell, children: [_jsx("div", { className: "prizma-viewfinder__surface", children: camera }), _jsx("div", { className: "video-selfie-stepper", children: _jsx(PrizmaStepper, { steps: 7, currentState: STEP[side], documentType: documentType, completedValueText: strings.stepperCompletedLabel }) }), _jsxs("div", { className: [
                     'prizma-viewfinder__content',
                     overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
                 ]
                     .filter(Boolean)
-                    .join(' '), children: [_jsx("div", { className: "video-selfie-band" }), _jsx(PrizmaIdCapture, { type: documentType, state: CAPTURE_STATE[state], isVertical: true, mode: "overlay", scrim: true, showEncryptedLabel: false, still: still }), state === 'processing' ? (_jsx("div", { className: "video-selfie-stage-status", children: _jsx(PrizmaLoadingSpinner, { showTitle: true, titleText: strings.idCapture.processingLabel, loadingLabel: strings.idCapture.processingLabel }) })) : null, state === 'allGood' || state === 'error' ? (_jsx("div", { className: "video-selfie-stage-status", children: state === 'allGood' ? (_jsx(PrizmaSnackbar, { state: "success", role: "status", children: strings.idCapture.successLabel })) : (
-                        /* 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. */
-                        _jsx(PrizmaSnackbar, { state: "error", role: "alert", children: errorLabel })) })) : null] }), _jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] }));
+                    .join(' '), children: [_jsx("div", { className: "video-selfie-band", children: state === 'condition' ? (_jsx("div", { className: "video-selfie-feedback", children: _jsx(PrizmaCaptureFeedback, { feedback: conditionFeedback, title: conditionCopy.title, subtitle: conditionCopy.subtitle }) })) : null }), _jsx(PrizmaIdCapture, { className: "video-selfie-stage", type: documentType, state: state === 'condition' ? CONDITION_STATE[condition] : CAPTURE_STATE[state], isVertical: true, mode: "overlay", scrim: true, showEncryptedLabel: false, still: still }), _jsx("div", { className: "video-selfie-band" }), state === 'processing' ? (_jsx("div", { className: "video-selfie-stage-status", children: _jsx("div", { className: "video-selfie-stage-status__card", children: _jsx(PrizmaLoadingSpinner, { showTitle: true, titleText: strings.idCapture.processingLabel, loadingLabel: strings.idCapture.processingLabel }) }) })) : null, state === 'allGood' || state === 'error' ? (_jsx("div", { className: "video-selfie-stage-status", children: _jsx("div", { className: "video-selfie-stage-status__card", role: state === 'error' ? 'alert' : 'status', children: _jsx(PrizmaTitle, { title: state === 'allGood' ? strings.idCapture.successLabel : errorLabel, icon: { type: 'status', status: state === 'allGood' ? 'success' : 'error' } }) }) })) : null] }), _jsx("div", { className: "prizma-screen-layout__footer", children: _jsx(PrizmaTag, { label: strings.verifiedLabel }) })] }));
 });
 VideoSelfieIdCaptureScreen.displayName = 'VideoSelfieIdCaptureScreen';
 export default VideoSelfieIdCaptureScreen;