@incodetech/prizma-core-screens 0.2.7 → 0.2.12

package/src/ReusabilityStrings.ts

@@ -0,0 +1,127 @@
+// Reusability (Incode Bridge) — copy contract.
+//
+// The credential-reuse step of an Incode Bridge session: a returning person
+// who already verified with another member of the network is offered the
+// document they verified there, so they can skip ID capture at the company
+// they are onboarding with now. The SDK module is `identity-reuse`
+// (`incode-identity-reuse`, i18n namespace `identityReuse`); the product name
+// is Incode Bridge; the design file calls it Reusability. Bridge is NOT Trust
+// Graph: it moves the person's own credential, with their consent, to remove
+// friction — it makes no fraud claim (MVP spec, Notion, 2026-08-17).
+//
+// Figma: `Reusability - In Experimentation` (f4AsCbOBP29IbTQLxBNgNG), section
+// `Reusability Iterations` (7877:68814) — the iteration Camila shared with the
+// Identity team on 2026-09-19 and that the Web SDK built as ENG-57939 (Dusan,
+// PR #1021, "one-click credential selection with shared-data sheet"). Four
+// frames:
+//   · 7877:68816 `doc selection`  Multiple documents — two reusable passports
+//                                 and the "Scan a new document" row
+//   · 7877:68875 `doc selection`  Single document — one passport and the row
+//   · 7877:68927 `shared info`    Shared data — Core's bottom sheet over the
+//                                 selection listing what will be shared
+//   · 7877:68997 `demo_5`         Privacy Policy — Incode's policy, read in
+//                                 the flow, Done at the bottom
+//
+// Two product decisions shape the copy (consent review with legal, Granola
+// 2026-09-16; Vlado, #reusability 2026-09-15):
+//   1. The subtitle says WHO holds the data and that Incode only passes it:
+//      "A company you previously verified with holds a document you can reuse.
+//      Incode only passes it to {Company B}." The donor is never named (it may
+//      be a regulated entity); the recipient is.
+//   2. Selecting a document ADVANCES — no confirm button. A mis-tap is
+//      recovered with the nav's way back, not with a second step.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives
+// here, so the host's locale pack drives the module. The SDK's `identityReuse`
+// namespace already carries ES and PT for almost every sentence below.
+
+/** The document types the identity-reuse backend returns. The SDK's own
+ *  vocabulary (`identityReuse.documentType.*`). */
+export type ReusabilityDocumentType = 'passport' | 'idCard' | 'driversLicense';
+
+/**
+ * One reusable credential, as the backend describes it — DATA, not copy. The
+ * host formats the date (the SDK composes "Verified" + an `Intl` short date
+ * client-side, `identity-reuse.tsx` `formatVerifiedAt`) and masks the number.
+ */
+export interface ReusableCredential {
+  /** Stable id the host submits back on selection. */
+  id: string;
+  documentType: ReusabilityDocumentType;
+  /** ISO 3166-1 alpha-2. Resolves to Core's flag raster bank
+   *  (`PrizmaCountryFlag`, 24×18); a country outside the bundled bank falls back
+   *  to `countryFlag`. */
+  countryCode: string;
+  /** Emoji fallback for a country the raster bank does not carry — Core's own
+   *  fallback rule for the Combined input and the Document List card. */
+  countryFlag?: string;
+  /** Already masked by the backend ("MP1******3815"). */
+  maskedNumber: string;
+  /** Already formatted by the host ("Apr 2023"). Rendered after
+   *  `selection.verifiedPrefix`. */
+  verifiedOn: string;
+}
+
+export interface ReusabilityStrings {
+  /** "verified by" attribution in the footer tag. */
+  verifiedLabel: string;
+  /** Accessible name for the logo nav row. */
+  navLabel?: string;
+
+  /** The `doc selection` frames — the one screen of the module. */
+  selection: {
+    /** H2 ("Share your details for a faster verification"). */
+    title: string;
+    /** H5 under the title. The frame's recipient placeholder is `{Company B}`;
+     *  the SDK interpolates `{{companyName}}` (`identityReuse.subtitleWithCompany`). */
+    subtitle: string;
+    /** Accessible name of the option list. */
+    listLabel: string;
+    /** The document-type label on each credential row ("Passport"). */
+    documentType: Record<ReusabilityDocumentType, string>;
+    /** The pill on the first row — the backend orders the list best match
+     *  first, and the first is tagged ("Recommended"). */
+    recommendedTag: string;
+    /** The word before the formatted date on each row ("Verified"). The SDK
+     *  translates only this word and appends the date locally. */
+    verifiedPrefix: string;
+    /** The last row — capture a document instead of reusing one. */
+    scanNewLabel: string;
+    /** The pill on that row ("Slowest"). */
+    slowestTag: string;
+    /** First tertiary link under the list ("What data will be shared?"):
+     *  opens the shared-details sheet. */
+    sharedDataLink: string;
+    /** Second tertiary link ("Incode’s Privacy Policy"): opens the policy. */
+    privacyPolicyLink: string;
+  };
+
+  /** The `shared info` frame — Core's bottom sheet over the selection. */
+  sharedDetails: {
+    /** Sheet heading, Core's H1 ("Shared details"). */
+    title: string;
+    /** Under the heading ("Only the following information will be shared with
+     *  {Company B}."). */
+    subtitle: string;
+    /** The bullet list — what the recipient asked for. In production these
+     *  come from the recipient's data-sharing request (ENG-57939 acceptance
+     *  criteria), so the list is host data rendered through this slot. */
+    items: string[];
+    /** The sheet's one button ("Understood"). */
+    ctaLabel: string;
+  };
+
+  /**
+   * The `demo_5` frame — Incode's privacy policy, read inside the flow. The
+   * document ITSELF is not here: it is host content (the policy at
+   * incode.com/privacy, in the host's language), supplied through the screen's
+   * `body` slot the way Qualified Signature's viewers take their contract.
+   */
+  privacyPolicy: {
+    /** H2 the archetype requires; the frame draws none (DEVIATIONS #RU-7).
+     *  The link's own label ("Incode’s Privacy Policy") is the natural title. */
+    title: string;
+    /** Primary under the document ("Done"): back to the selection. */
+    ctaLabel: string;
+  };
+}

package/src/ReviewScreen.tsx

@@ -13,12 +13,18 @@ import type {
 import './ScreenLayout.css';
 
 /**
- * The three stages every captured-media review section shares. Identical
- * skeleton — only the header block (Title vs loading bar), the media's own
- * state and the presence of the CTA row change. Named to match the modules'
- * own stage axis (`DocumentCaptureConfirmStage`, Video Selfie's review step).
+ * The stages a captured-media review section shares. Identical skeleton —
+ * only the header block (Title vs loading bar), the media's own state and
+ * the presence of the CTA row change. `review`/`analyzing`/`success` name the
+ * modules' own confirm-flow axis (`DocumentCaptureConfirmStage`, Video
+ * Selfie's review step); `error` is Digital ID Upload-only so far — its
+ * verdict screen shows the SAME rejected-file media the confirm flow does
+ * (`PrizmaCaptureDigitalId state="error"`), drawn with the identical
+ * header/media/CTA skeleton as `analyzing`/`success` (`Upload Digital ID`
+ * file wxFsHRvllern4VnjRqM4JO, node 25874:11957) — not archetype F, whose
+ * verdict screens carry no media stage of their own.
  */
-export type PrizmaReviewStage = 'review' | 'analyzing' | 'success';
+export type PrizmaReviewStage = 'review' | 'analyzing' | 'success' | 'error';
 
 export interface PrizmaReviewScreenProps
   extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'>,
@@ -27,7 +33,7 @@ export interface PrizmaReviewScreenProps
   stage?: PrizmaReviewStage;
   /** H2 review/base title ("Review your document"). */
   title: string;
-  /** Supporting copy under the title — drawn on `review` only (Figma). */
+  /** Supporting copy under the title — drawn on `review`/`error` (Figma). */
   subtitle?: string;
   /** Title shown on `success`; falls back to `title` when omitted. */
   successTitle?: string;
@@ -41,6 +47,25 @@ export interface PrizmaReviewScreenProps
   analyzingState?: 'analyzing' | 'uploading';
   /** Loading-bar progress on `analyzing`, 0–100. */
   progress?: number;
+  /**
+   * Only takes effect while the nav is hidden (`showHeader=false` — every
+   * current no-nav stage is `analyzing`/`success`). Default `false` —
+   * Document Capture's verified layout (DEVIATIONS #DC-22/24): the header
+   * sits where a title normally would, Spacing/32 above the stage, and
+   * whatever follows (the stage, then an optional band) centres or flows
+   * independently.
+   *
+   * `true`: the header and the media centre as ONE group — leftover space
+   * splits evenly above the header and below the trailing content (the CTA
+   * band, or nothing) — because with no nav the header has nothing to anchor
+   * to. Digital ID Upload's Figma draws BOTH its no-nav stages this way: a
+   * top flex-1 region bottom-anchoring the header, the fixed media, then a
+   * bottom flex-1 region (empty on `analyzing`, bottom-anchoring the CTA on
+   * `success`) — `Upload Digital ID` file wxFsHRvllern4VnjRqM4JO, nodes
+   * 25351:14726 (analyzing) / 25351:14727 (success). `review` always shows
+   * its own nav, so this is a no-op there regardless of the value passed.
+   */
+  centeredWhenNoNav?: boolean;
   /**
    * The flexing captured-media slot: a `PrizmaIdCapture` still, an uploaded-file
    * preview card, a portrait review. Kept a slot so one template serves every
@@ -55,7 +80,7 @@ export interface PrizmaReviewScreenProps
    * offset and footer all come from ScreenLayout.css regardless.
    */
   stageClassName?: string;
-  /** Primary CTA — the forward action. Drawn on `review` and `success`. */
+  /** Primary CTA — the forward action. Drawn on `review`, `success`, `error`. */
   primaryLabel: string;
   /** Secondary CTA ("Replace" / "Retake") — drawn on `review` only. */
   secondaryLabel?: string;
@@ -71,11 +96,12 @@ export interface PrizmaReviewScreenProps
  * Archetype H — Review (captured-media confirmation).
  *
  * The "header → flexing captured-media stage → CTA band → tag" recipe, with a
- * `review → analyzing → success` stage axis. It exists because two Document
- * Capture screens hand-built it independently (`DocumentCaptureConfirmImage`,
- * `DocumentCaptureConfirmUpload`) with their own three-band arithmetic in
- * `DocumentCaptureLayout.css`, and Video Selfie's review step needs the same
- * skeleton — a captured still under a title, confirmed or replaced.
+ * `review → analyzing → success` stage axis (+ `error`, see `PrizmaReviewStage`).
+ * It exists because two Document Capture screens hand-built it independently
+ * (`DocumentCaptureConfirmImage`, `DocumentCaptureConfirmUpload`) with their
+ * own three-band arithmetic in `DocumentCaptureLayout.css`, and Video Selfie's
+ * review step needs the same skeleton — a captured still under a title,
+ * confirmed or replaced.
  *
  * It is NOT archetype F (Result): F centres a small status + CTA block, while a
  * review TOP-aligns the header over a large media stage that flexes to fill the
@@ -101,6 +127,7 @@ export const PrizmaReviewScreen = forwardRef<HTMLDivElement, PrizmaReviewScreenP
       analyzingLabel,
       analyzingState = 'analyzing',
       progress = 0,
+      centeredWhenNoNav = false,
       children,
       stageClassName,
       primaryLabel,
@@ -122,6 +149,7 @@ export const PrizmaReviewScreen = forwardRef<HTMLDivElement, PrizmaReviewScreenP
     const withNav = showHeader ?? Boolean(overrides?.logo);
     const showSecondary = stage === 'review' && Boolean(secondaryLabel);
     const showBand = stage !== 'analyzing' && Boolean(primaryLabel || secondaryLabel);
+    const centeredGroup = !withNav && centeredWhenNoNav;
 
     return (
       <PrizmaScreenShell ref={ref} {...shell}>
@@ -136,7 +164,14 @@ export const PrizmaReviewScreen = forwardRef<HTMLDivElement, PrizmaReviewScreenP
             .filter(Boolean)
             .join(' ')}
         >
-          <div className="prizma-screen-layout__review-header">
+          <div
+            className={[
+              'prizma-screen-layout__review-header',
+              centeredGroup ? 'prizma-screen-layout__review-header--centered' : '',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+          >
             {stage === 'analyzing' ? (
               <div className="prizma-screen-layout__review-loading">
                 <PrizmaLoadingBar
@@ -149,9 +184,15 @@ export const PrizmaReviewScreen = forwardRef<HTMLDivElement, PrizmaReviewScreenP
               <PrizmaTitle
                 variant={overrides?.align === 'left' ? 'left' : 'centered'}
                 title={stage === 'success' ? successTitle ?? title : title}
-                showSubtitle={stage === 'review' && Boolean(subtitle)}
+                showSubtitle={(stage === 'review' || stage === 'error') && Boolean(subtitle)}
                 subtitle={subtitle}
-                icon={stage === 'success' ? { type: 'status', status: 'success' } : undefined}
+                icon={
+                  stage === 'success'
+                    ? { type: 'status', status: 'success' }
+                    : stage === 'error'
+                      ? { type: 'status', status: 'error' }
+                      : undefined
+                }
               />
             )}
           </div>
@@ -160,6 +201,7 @@ export const PrizmaReviewScreen = forwardRef<HTMLDivElement, PrizmaReviewScreenP
             className={[
               'prizma-screen-layout__review-stage',
               stage === 'analyzing' ? 'prizma-screen-layout__review-stage--flush' : '',
+              centeredGroup ? 'prizma-screen-layout__review-stage--centered-group' : '',
               stageClassName ?? '',
             ]
               .filter(Boolean)
@@ -168,18 +210,45 @@ export const PrizmaReviewScreen = forwardRef<HTMLDivElement, PrizmaReviewScreenP
             {children}
           </div>
 
-          {showBand ? (
-            <div className="prizma-screen-layout__band prizma-screen-layout__band--review">
-              <PrizmaButtonGroup
-                orientation="horizontal-v1"
-                showSecondary={showSecondary}
-                primaryLabel={primaryLabel}
-                onPrimaryClick={() => onAction?.({ type: 'cta', screenId })}
-                secondaryLabel={secondaryLabel}
-                onSecondaryClick={() => onAction?.({ type: 'secondary', screenId })}
-              />
-            </div>
-          ) : null}
+          {(() => {
+            const band = showBand ? (
+              <div
+                className={[
+                  'prizma-screen-layout__band',
+                  'prizma-screen-layout__band--review',
+                  // No footer tag to reserve the bottom space (§6, owner rule
+                  // 2026-08-18: header/footer are independently controlled) —
+                  // fall back to the band's own Spacing/24, same as any other
+                  // screen that "genuinely carries no tag" (ScreenLayout.css).
+                  // Otherwise the CTA sits flush against the shell edge.
+                  !showFooter ? 'prizma-screen-layout__band--bare' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+              >
+                <PrizmaButtonGroup
+                  orientation="horizontal-v1"
+                  showSecondary={showSecondary}
+                  primaryLabel={primaryLabel}
+                  onPrimaryClick={() => onAction?.({ type: 'cta', screenId })}
+                  secondaryLabel={secondaryLabel}
+                  onSecondaryClick={() => onAction?.({ type: 'secondary', screenId })}
+                />
+              </div>
+            ) : null;
+            // Balances the header's own flex-1 (`--centered`) so the header +
+            // media sit as one group centred between equal top/bottom space,
+            // instead of the media alone centring below a pinned header. The
+            // band (if any — `success`) bottom-anchors inside this same
+            // trailing region instead of just following the stage, matching
+            // Figma's own bottom flex-1 container; `analyzing` carries no
+            // band, so the region is just an empty spacer.
+            return centeredGroup ? (
+              <div className="prizma-screen-layout__review-trailing">{band}</div>
+            ) : (
+              band
+            );
+          })()}
 
           {showFooter ? (
             <div className="prizma-screen-layout__band__tag">