@incodetech/prizma-core-screens 0.2.7 → 0.2.14

package/src/QualifiedSignatureResultScreen.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
 import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type {
@@ -19,6 +19,7 @@ export interface QualifiedSignatureResultScreenProps
     | 'disclaimer'
     | 'ctaLabel'
     | 'secondaryCtaLabel'
+    | 'progress'
     | 'verifiedLabel'
     | 'navLabel'
   > {
@@ -26,6 +27,11 @@ export interface QualifiedSignatureResultScreenProps
   strings: QualifiedSignatureStrings;
   /** Which verdict section to render. Default `signed`. */
   variant?: QualifiedSignatureResultVariant;
+  /** `signed` · `signedPartner` only — draw the "document downloaded" Snackbar,
+   *  the state after the person pressed the download control. HOST state, like
+   *  Error screens' `copied`: the host sets it on the `secondary` action and
+   *  clears it when its own timer runs out. Default `false`. */
+  downloaded?: boolean;
   screenId?: string;
   overrides?: PrizmaScreenOverrides;
   onAction?: PrizmaScreenActionHandler;
@@ -39,8 +45,10 @@ export interface QualifiedSignatureResultScreenProps
  * nav → centred status mark + title block → CTA band → anchored tag — and differ
  * in status, copy and which actions exist:
  * - `signed`        — `QSign.success` (10196:67485): the positive mark over a
- *   `Button group` 124 tall = the "Continue" primary plus the "Download PDF"
- *   underlined link.
+ *   STACKED pair — "Continue" primary above a "Download PDF" OUTLINED
+ *   secondary. Figma draws the download as an underlined link; it ships as the
+ *   partner's secondary Button instead (owner call 2026-10-08, "make the
+ *   generic one look like Namirial"), so both success endings read alike.
  * - `signedPlain`   — `QSign.success` (10196:67494): the SAME mark and line
  *   with no actions at all, so the band never renders and the screen reads as
  *   the pure §6-C verdict.
@@ -69,16 +77,12 @@ export interface QualifiedSignatureResultScreenProps
  * The owner rule settles the split in favour of keeping it (#PI-8, #F-30) so
  * nothing shifts between states.
  *
- * ONE reported delta: on `signed`, Figma puts "Download PDF" BELOW the primary,
- * at Core's `PrizmaButtonGroup` Spacing/12. Archetype F has no tertiary-link
- * slot — its only band opening above the buttons is `bandContent` — so Core's
- * own `tertiary-link` Button is composed there and lands ABOVE the primary at
- * the band's Spacing/32 (16 + 16). Ink, semantics and the distinct `secondary`
- * action are all correct (#PI-10); only the position moves. #GEO-1 fixes the
- * tertiary link's position PER ARCHETYPE and F has never declared one — the
- * archetype request is logged instead of a local override. `signedPartner` is
- * unaffected: its download control is a real outlined secondary Button, which
- * the archetype already places correctly.
+ * The download confirmation. Pressing "Download PDF" / "Download document"
+ * emits `secondary`; the host then sets `downloaded` and the screen raises a
+ * success Snackbar ("Document downloaded") in the archetype's `progress` slot,
+ * between the nav and the content, the same slot and component Error screens
+ * use for "link copied" (owner call 2026-10-08). Dismissal is the host's: the
+ * Snackbar is presentational (snackbar.md §9 item 6).
  */
 export const QualifiedSignatureResultScreen = forwardRef<
   HTMLDivElement,
@@ -88,6 +92,7 @@ export const QualifiedSignatureResultScreen = forwardRef<
     {
       strings,
       variant = 'signed',
+      downloaded = false,
       screenId = `qualified-signature-result-${variant}`,
       overrides,
       onAction,
@@ -113,24 +118,21 @@ export const QualifiedSignatureResultScreen = forwardRef<
         status={variant === 'error' || variant === 'errorRetry' ? 'warning' : 'success'}
         title={copy.title}
         subtitle={copy.subtitle}
+        progress={
+          downloaded && (signedCopy?.downloadLabel || partnerCopy) ? (
+            <PrizmaSnackbar state="success" contentResizing="fill">
+              {strings.result.downloadedLabel}
+            </PrizmaSnackbar>
+          ) : undefined
+        }
         /* "Continue" · "Done" · "Try again" — the archetype's own primary. */
         ctaLabel={signedCopy?.ctaLabel ?? partnerCopy?.ctaLabel ?? retryCopy?.ctaLabel}
-        /* The partner's outlined "Download document", below the primary. */
-        secondaryCtaLabel={partnerCopy?.secondaryCtaLabel}
+        /* The outlined download, below the primary: "Download PDF" on the
+           generic ending, "Download document" on the partner's. */
+        secondaryCtaLabel={signedCopy?.downloadLabel ?? partnerCopy?.secondaryCtaLabel}
         /* The partner's "Signed by …" row — the band's centred text slot, which
            puts it above the button pair exactly as Figma draws it. */
         disclaimer={partnerCopy?.signedByLabel}
-        bandContent={
-          signedCopy?.downloadLabel ? (
-            <PrizmaButton
-              variant="tertiary-link"
-              size="L"
-              onClick={() => onAction?.({ type: 'secondary', screenId })}
-            >
-              {signedCopy.downloadLabel}
-            </PrizmaButton>
-          ) : undefined
-        }
         verifiedLabel={strings.verifiedLabel}
         navLabel={strings.navLabel}
         screenId={screenId}

package/src/QualifiedSignatureStrings.ts

@@ -62,7 +62,8 @@ export type QualifiedSignatureDocumentVariant = 'document' | 'terms';
  * The FIVE verdict frames. Both purple parents draw success twice and error
  * twice, and each pair differs in what the signer can do next:
  * - `signed`        — `QSign.success` (10196:67485): the positive mark with
- *   "Continue" and a "Download PDF" underlined link
+ *   "Continue" primary above a "Download PDF" outlined secondary (was an
+ *   underlined link in Figma; owner call 2026-10-08, matches the partner)
  * - `signedPlain`   — `QSign.success` (10196:67494): the same mark and line
  *   with NO actions at all
  * - `signedPartner` — the `x Namirial` parent's own success frame (6086:40135),
@@ -192,9 +193,11 @@ export interface QualifiedSignatureStrings {
     document: { title: string };
     /** QSign.T&C ("Certificate Application Form"), left-aligned in Figma. */
     terms: { title: string };
-    /** Accessible name of the nav's back chevron on both document screens
+    /** The way back on both document screens
      *  ("Back") — they are opened from the accept screen, so they carry a way
-     *  back to it. Emits `back`. Omit to render the logo-only nav. */
+     *  back to it. It is the label of a full-width SECONDARY button in the CTA
+     *  band (owner call 2026-10-08, was the nav chevron) and emits
+     *  `secondary`. Omit it and no way back renders. */
     backLabel?: string;
   };
 
@@ -231,7 +234,8 @@ export interface QualifiedSignatureStrings {
       subtitle?: string;
       /** Primary CTA ("Continue"). */
       ctaLabel: string;
-      /** Underlined tertiary link ("Download PDF"). Emits `secondary`. */
+      /** OUTLINED secondary below the primary ("Download PDF"), the same
+       *  control as the partner's "Download document". Emits `secondary`. */
       downloadLabel?: string;
     };
     /** QSign.success drawn with no actions. */
@@ -253,6 +257,9 @@ export interface QualifiedSignatureStrings {
        *  `secondary`. A real Button, not `signed`'s underlined link. */
       secondaryCtaLabel: string;
     };
+    /** The success Snackbar raised after either download control was pressed
+     *  ("Document downloaded"). Shared by `signed` and `signedPartner`. */
+    downloadedLabel: string;
     /** QSign.AcceptSign.error ("Something went wrong"). Figma draws no button. */
     error: { title: string; subtitle?: string };
     /** The retry frame ("Signature failed" + "Try again"). */

package/src/ResultScreen.tsx

@@ -77,6 +77,14 @@ export interface PrizmaResultScreenProps
    * job (Face Match's verdict Snackbar). DEVIATIONS #VS-17.
    */
   linkLabel?: string;
+  /**
+   * Where the tertiary link sits in the stack. `below` (default) is archetype
+   * A's position; `above` puts it over the primary CTA, which is what the
+   * permission frames draw ("Quit process" over "Allow permission",
+   * DEVIATIONS #GEN-3, #VS-17). The slot those rows escalated: the archetype
+   * still owns both positions, a screen only picks one of them.
+   */
+  linkPosition?: 'below' | 'above';
   /** "verified by" attribution copy for the footer tag. */
   verifiedLabel: string;
   navLabel?: string;
@@ -118,6 +126,7 @@ export const PrizmaResultScreen = forwardRef<HTMLDivElement, PrizmaResultScreenP
       ctaLabel,
       secondaryCtaLabel,
       linkLabel,
+      linkPosition = 'below',
       verifiedLabel,
       navLabel,
       screenId,
@@ -152,7 +161,20 @@ export const PrizmaResultScreen = forwardRef<HTMLDivElement, PrizmaResultScreenP
         {children}
       </div>
       {ctaLabel || secondaryCtaLabel || linkLabel || disclaimer || bandContent ? (
-        <div className="prizma-screen-layout__band prizma-screen-layout__band--result">
+        <div
+          className={[
+            'prizma-screen-layout__band',
+            'prizma-screen-layout__band--result',
+            // No footer tag to reserve `--pcs-footer-space` for — same gap the
+            // Review archetype's `--bare` fallback exists for (ScreenLayout.css).
+            // Every existing F consumer always shows the tag, so this has never
+            // fired before; without it the CTA sits ~40px further from the
+            // bottom than Figma's flat Spacing/24 draws.
+            !showFooter ? 'prizma-screen-layout__band--bare' : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
           {bandContent ? (
             <div className="prizma-screen-layout__band__content">{bandContent}</div>
           ) : null}
@@ -168,6 +190,15 @@ export const PrizmaResultScreen = forwardRef<HTMLDivElement, PrizmaResultScreenP
                 2026-08-19, DEVIATIONS #GEO-1). Not a per-screen choice and not
                 a prop — a screen never picks its own button order. `row` pairs
                 them side by side instead, where the rule does not apply. */}
+            {linkLabel && linkPosition === 'above' ? (
+              <PrizmaButton
+                variant="tertiary-link"
+                size="L"
+                onClick={() => onAction?.({ type: 'tertiary', screenId })}
+              >
+                {linkLabel}
+              </PrizmaButton>
+            ) : null}
             {ctaLabel ? (
               <PrizmaButton
                 variant="primary"
@@ -186,7 +217,7 @@ export const PrizmaResultScreen = forwardRef<HTMLDivElement, PrizmaResultScreenP
                 {secondaryCtaLabel}
               </PrizmaButton>
             ) : null}
-            {linkLabel ? (
+            {linkLabel && linkPosition === 'below' ? (
               <PrizmaButton
                 variant="tertiary-link"
                 size="L"

package/src/ReusabilityCredentialSelectionScreen.tsx

@@ -0,0 +1,246 @@
+import React, { forwardRef } from 'react';
+import { PrizmaBottomSheetContent } from '@incodetech/prizma-core-web/bottom-sheet';
+import { PrizmaCountryFlag } from '@incodetech/prizma-core-web/combined';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { ReusableCredential, ReusabilityStrings } from './ReusabilityStrings';
+import './ScreenLayout.css';
+import './ReusabilityLayout.css';
+
+/** The sentinel the SDK submits for the capture row (`SCAN_NEW_DOCUMENT`,
+ *  `identityReuseStateMachine.ts`): `{ accepted: false }`, then ID Capture. */
+export const REUSABILITY_SCAN_NEW = 'scanNew' as const;
+
+export type ReusabilitySelection = string | typeof REUSABILITY_SCAN_NEW;
+
+export interface ReusabilityCredentialSelectionScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'glyph'
+    | 'children'
+    | 'listAlign'
+    | 'scrollList'
+    | 'disclaimer'
+    | 'ctaLabel'
+    | 'secondaryCtaLabel'
+    | 'linkLabel'
+    | 'secondaryLinkLabel'
+    | 'overlay'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `selection` and `sharedDetails` slices. */
+  strings: ReusabilityStrings;
+  /**
+   * The documents the network found for this person, best match FIRST — the
+   * backend orders them and the first row wears the "Recommended" pill (SDK
+   * `recommended={index === 0}`). One or more; the frame draws two
+   * (`Multiple documents`) and one (`Single document`).
+   */
+  credentials: ReusableCredential[];
+  /**
+   * "What data will be shared?" was pressed: Core's bottom sheet listing the
+   * recipient's data request is presented over the dimmed selection
+   * (`shared info`, 7877:68927). Its one button emits `cta` and closes it.
+   */
+  sharedDetails?: boolean;
+  /**
+   * Fired with the chosen credential's id, or `REUSABILITY_SCAN_NEW` for the
+   * capture row; `onAction` still reports the tap as `cta`. Named like ID
+   * Capture's `onDocumentSelect` — `onSelect` is a native <div> event the shell
+   * already passes through.
+   */
+  onCredentialSelect?: (selection: ReusabilitySelection) => void;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Reusability (Incode Bridge) — choose the document to reuse, built on the
+ * List archetype (GUIDELINES.md §6-G, `PrizmaListScreen`).
+ *
+ * ONE screen for three of the section's four frames: `Multiple documents`
+ * (7877:68816) and `Single document` (7877:68875) are the same skeleton — nav →
+ * Title (H2 + H5) → the credential list → "Scan a new document" → two tertiary
+ * links → tag — differing only in how many rows the network returned; and
+ * `Shared data` (7877:68927) is that screen with Core's bottom sheet presented
+ * over it (`sharedDetails`).
+ *
+ * WHY ARCHETYPE G. The rows ARE the actions — tapping a document advances the
+ * session with no confirm step (consent review 2026-09-16: "remove the confirm
+ * button: selecting a document advances the user immediately"; the Web SDK's
+ * ENG-57939 built exactly that) — so there is no primary CTA, and G is the one
+ * archetype whose band may carry links alone. ID Capture's document chooser is
+ * the same shape on the same archetype.
+ *
+ * Six things are deliberate:
+ *
+ * 1. The rows are composed here from Core's tokens, not from Core's
+ *    `PrizmaCardListVerificationOptions`. The frame calls them "Verification
+ *    options card list", but a reusable credential has a different anatomy —
+ *    type label + status pill, flag + masked number, verified date — and the
+ *    capture row is one line with a pill. Core ships neither that row nor a
+ *    plain status pill; both are proposed (DEVIATIONS #RU-1, #RU-2) and the
+ *    rules live once in `ReusabilityLayout.css`.
+ * 2. Every row is a real `<button>` that emits `cta` and names its credential
+ *    through `onCredentialSelect` — the one-click rule. No radio, no selected
+ *    state: the frame draws none and the decision was to drop them. The SDK's
+ *    shipped `role="radio"` + confirm is the generation BEFORE this frame.
+ * 3. The first row wears "Recommended", because the backend sorts best match
+ *    first; the capture row wears "Slowest". The pills are the frame's own
+ *    fills on Core tokens; their 12px type is the one value Core's scale
+ *    cannot express (#RU-2).
+ * 4. The flag is Core's raster bank (`PrizmaCountryFlag`, 24×18), never the
+ *    frame's emoji glyph (owner decision 2026-07-12). A country outside the
+ *    bank falls back to the emoji the host supplies — Core's own fallback rule
+ *    (#RU-3).
+ * 5. The two links ride the archetype's band: "What data will be shared?" in
+ *    `linkLabel` (emits `secondary`) and "Incode’s Privacy Policy" in the new
+ *    `secondaryLinkLabel` slot (emits `tertiary`) — two non-primary actions a
+ *    host must tell apart (#PI-10), so each has its own action. The band's
+ *    flat Spacing/16 stands between them where the frame's Button group
+ *    tightens the pair by 8 (#RU-4).
+ * 6. The sheet rides the archetype's new `overlay` slot — the same contract E
+ *    gained for Biometric Consent (#BC-8): the screen owns the scrim and the
+ *    anchoring (the foundation's `__sheet-scrim` / `__sheet-panel`), Core owns
+ *    the panel — `PrizmaBottomSheetContent variant="dialog"` with its H1
+ *    title, H5 subtitle, the bullet list in `body`, and its own Button Group
+ *    reduced to "Understood". With the sheet up the rows and links are under
+ *    the scrim and do not report (#RU-5).
+ *
+ * The nav keeps the logo and draws no close: the frame's top-right ✕ is the
+ * SDK page chrome, not a Prizma screen control (GUIDELINES §3; #RU-6).
+ */
+export const ReusabilityCredentialSelectionScreen = forwardRef<
+  HTMLDivElement,
+  ReusabilityCredentialSelectionScreenProps
+>(
+  (
+    {
+      strings,
+      credentials,
+      sharedDetails = false,
+      onCredentialSelect,
+      screenId = sharedDetails
+        ? 'reusability-shared-details'
+        : `reusability-selection-${credentials.length > 1 ? 'multiple' : 'single'}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const { selection, sharedDetails: shared } = strings;
+
+    const choose = (choice: ReusabilitySelection) => {
+      if (sharedDetails) return;
+      onCredentialSelect?.(choice);
+      onAction?.({ type: 'cta', screenId });
+    };
+
+    const sheet = sharedDetails ? (
+      <>
+        <div className="prizma-screen-layout__sheet-scrim" aria-hidden="true" />
+        <div className="prizma-screen-layout__sheet-panel">
+          <PrizmaBottomSheetContent
+            variant="dialog"
+            title={shared.title}
+            subtitle={shared.subtitle}
+            body={
+              <ul className="reusability-shared-list">
+                {shared.items.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+              </ul>
+            }
+            buttonGroupProps={{
+              primaryLabel: shared.ctaLabel,
+              showSecondary: false,
+              onPrimaryClick: () => onAction?.({ type: 'cta', screenId }),
+            }}
+          />
+        </div>
+      </>
+    ) : undefined;
+
+    return (
+      <PrizmaListScreen
+        ref={ref}
+        title={selection.title}
+        subtitle={selection.subtitle}
+        linkLabel={selection.sharedDataLink}
+        secondaryLinkLabel={selection.privacyPolicyLink}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        /* With the sheet up, the links are under the scrim and must not
+           report: the sheet's "Understood" is the only action. */
+        onAction={sharedDetails ? undefined : onAction}
+        overlay={sheet}
+        {...shell}
+      >
+        <div className="reusability-credentials" role="group" aria-label={selection.listLabel}>
+          <div className="reusability-credentials__group">
+            {credentials.map((credential, index) => (
+              <button
+                key={credential.id}
+                type="button"
+                className="reusability-credential"
+                onClick={() => choose(credential.id)}
+                tabIndex={sharedDetails ? -1 : undefined}
+              >
+                <span className="reusability-credential__head">
+                  <span className="reusability-credential__type">
+                    {selection.documentType[credential.documentType]}
+                  </span>
+                  {index === 0 ? (
+                    <span className="reusability-pill reusability-pill--recommended">
+                      {selection.recommendedTag}
+                    </span>
+                  ) : null}
+                </span>
+                <span className="reusability-credential__number">
+                  <span className="reusability-credential__flag" aria-hidden="true">
+                    <PrizmaCountryFlag
+                      country={{
+                        code: credential.countryCode,
+                        name: credential.countryCode,
+                        dialCode: '',
+                        flag: credential.countryFlag ?? '',
+                      }}
+                    />
+                  </span>
+                  <span>{credential.maskedNumber}</span>
+                </span>
+                <span className="reusability-credential__verified">
+                  <span>{selection.verifiedPrefix}</span> <span>{credential.verifiedOn}</span>
+                </span>
+              </button>
+            ))}
+          </div>
+          <div className="reusability-credentials__group">
+            <button
+              type="button"
+              className="reusability-credential"
+              onClick={() => choose(REUSABILITY_SCAN_NEW)}
+              tabIndex={sharedDetails ? -1 : undefined}
+            >
+              <span className="reusability-credential__head">
+                <span className="reusability-credential__type">{selection.scanNewLabel}</span>
+                <span className="reusability-pill reusability-pill--neutral">{selection.slowestTag}</span>
+              </span>
+            </button>
+          </div>
+        </div>
+      </PrizmaListScreen>
+    );
+  },
+);
+ReusabilityCredentialSelectionScreen.displayName = 'ReusabilityCredentialSelectionScreen';
+
+export default ReusabilityCredentialSelectionScreen;