@incodetech/prizma-core-screens 0.2.12 → 0.2.18

package/src/DigitalIdDeviceWalletsDocumentSelectionScreen.tsx

@@ -0,0 +1,108 @@
+import React, { forwardRef } from 'react';
+import { PrizmaCardListVerificationOptions } from '@incodetech/prizma-core-web/card-list';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  DigitalIdDeviceWalletsOption,
+  DigitalIdDeviceWalletsPlatformWallet,
+  DigitalIdDeviceWalletsStrings,
+} from './DigitalIdDeviceWalletsStrings';
+import './ScreenLayout.css';
+
+export interface DigitalIdDeviceWalletsDocumentSelectionScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    'title' | 'subtitle' | 'children' | 'listAlign' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `documentSelection` slice. */
+  strings: DigitalIdDeviceWalletsStrings;
+  /** Which wallet row the list carries. Default `apple` (iOS); `google` on
+   *  Android; `digital-id` on web, where the row comes last with no tag. */
+  wallet?: DigitalIdDeviceWalletsPlatformWallet;
+  /** Fired with the chosen option; `onAction` still reports the tap. Named
+   *  `onOptionSelect`, not `onSelect` — the latter is a native <div> event the
+   *  shell already passes through. */
+  onOptionSelect?: (option: DigitalIdDeviceWalletsOption) => void;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Digital ID Device Wallets — choose how to verify, with the device wallet
+ * first, built on the `PrizmaListScreen` archetype (GUIDELINES.md §6-G).
+ * Figma: `Digital IDs - Latest Design` (u7N5Zq4bfOwiVbpKHKmSPE), section
+ * `iOS Apple Wallet`, frame `1-1-1-how to verify` (26106:12647).
+ *
+ * The same screen as `IdCaptureDocumentSelectionScreen` with one more row: on
+ * iOS and Android the wallet on top, carrying Core's ⚡ Instant tag; on web a
+ * plain Digital ID row last (`[Web] Device Wallets`, 26106:13011). It is its own screen rather
+ * than a flag on ID Capture's so that ID Capture's chooser stays exactly what
+ * that module ships. Every piece is Core's — the row, the tag and the
+ * `apple-wallet` / `google-wallet` card icons (§10).
+ */
+export const DigitalIdDeviceWalletsDocumentSelectionScreen = forwardRef<
+  HTMLDivElement,
+  DigitalIdDeviceWalletsDocumentSelectionScreenProps
+>(
+  (
+    {
+      strings,
+      wallet = 'apple',
+      onOptionSelect,
+      screenId = 'digital-id-device-wallets-document-selection',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const choose = (option: DigitalIdDeviceWalletsOption) => {
+      onOptionSelect?.(option);
+      onAction?.({ type: 'cta', screenId });
+    };
+    const copy = strings.documentSelection;
+
+    return (
+      <PrizmaListScreen
+        ref={ref}
+        title={copy.title}
+        subtitle={copy.subtitle}
+        listAlign="end"
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        <PrizmaCardListVerificationOptions
+          items={
+            wallet === 'digital-id'
+              ? [
+                  // Web: the documents first, the plain Digital ID row last.
+                  { icon: 'id', title: copy.idLabel, onClick: () => choose('id') },
+                  { icon: 'passport', title: copy.passportLabel, onClick: () => choose('passport') },
+                  { icon: 'digital-id', title: copy.digitalIdLabel, onClick: () => choose('wallet') },
+                ]
+              : [
+                  {
+                    icon: wallet === 'apple' ? 'apple-wallet' : 'google-wallet',
+                    title: wallet === 'apple' ? copy.appleWalletLabel : copy.googleWalletLabel,
+                    hasTag: true,
+                    tagLabel: copy.instantLabel,
+                    onClick: () => choose('wallet'),
+                  },
+                  { icon: 'id', title: copy.idLabel, onClick: () => choose('id') },
+                  { icon: 'passport', title: copy.passportLabel, onClick: () => choose('passport') },
+                ]
+          }
+        />
+      </PrizmaListScreen>
+    );
+  },
+);
+DigitalIdDeviceWalletsDocumentSelectionScreen.displayName =
+  'DigitalIdDeviceWalletsDocumentSelectionScreen';
+
+export default DigitalIdDeviceWalletsDocumentSelectionScreen;

package/src/DigitalIdDeviceWalletsResultScreen.tsx

@@ -0,0 +1,76 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  DigitalIdDeviceWalletsResultState,
+  DigitalIdDeviceWalletsStrings,
+} from './DigitalIdDeviceWalletsStrings';
+import './ScreenLayout.css';
+
+export interface DigitalIdDeviceWalletsResultScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'ctaLabel' | 'secondaryCtaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `success` or `error` slice. */
+  strings: DigitalIdDeviceWalletsStrings;
+  /** Which verdict the wallet hand-back landed on. */
+  state: DigitalIdDeviceWalletsResultState;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Digital ID Device Wallets — the verdict after the wallet hands the ID back,
+ * built on the `PrizmaResultScreen` archetype (GUIDELINES.md §6-F).
+ *
+ * `error` is `Digital ID Generic Error` (26540:5685): status icon, title and
+ * subtitle centred in the full height, one CTA near the bottom, no logo nav and
+ * no verified tag. `success` has no frame — the section's `Success?` decision
+ * goes straight to the next module — so it is the same recipe with the
+ * positive mark and no button: it moves on by itself after 3 s, the way Face
+ * Capture's success does (DEVIATIONS.md #DIW-1). On web the error can carry a
+ * second button, "Choose another method", back to the chooser (#DIW-5).
+ */
+export const DigitalIdDeviceWalletsResultScreen = forwardRef<
+  HTMLDivElement,
+  DigitalIdDeviceWalletsResultScreenProps
+>(
+  (
+    {
+      strings,
+      state,
+      screenId = `digital-id-device-wallets-${state}`,
+      showHeader = false,
+      showFooter = false,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = state === 'success' ? strings.success : strings.error;
+    return (
+      <PrizmaResultScreen
+        ref={ref}
+        status={state}
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        secondaryCtaLabel={state === 'error' ? strings.error.secondaryCtaLabel : undefined}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        showHeader={showHeader}
+        showFooter={showFooter}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      />
+    );
+  },
+);
+DigitalIdDeviceWalletsResultScreen.displayName = 'DigitalIdDeviceWalletsResultScreen';
+
+export default DigitalIdDeviceWalletsResultScreen;

package/src/DigitalIdDeviceWalletsStrings.ts

@@ -0,0 +1,80 @@
+// Digital ID Device Wallets module — copy contract.
+//
+// Every Digital ID Device Wallets screen receives the SAME `strings:
+// DigitalIdDeviceWalletsStrings` object (rule: all copy via props, no hardcoded
+// English — GUIDELINES.md §9).
+//
+// Authoritative screens: the `iOS Apple Wallet` section of the Digital IDs -
+// Latest Design Figma file (u7N5Zq4bfOwiVbpKHKmSPE, node 26103:3689) —
+// `1-1-1-how to verify` (26106:12647, the chooser with the Apple Wallet row)
+// and `Digital ID Generic Error` (26540:5685). Two frames of the section are
+// NOT part of this contract: `Apple Wallet System Modal` (26597:14667) is the
+// OS's own sheet — OS chrome, DEVIATIONS.md #DC-20 precedent, mocked on the
+// Core Lab canvas instead — and `1-2-1-id` / `2-2-1-id` are ID Capture's own
+// tutorials, which the Identity Card and Passport rows hand off to.
+//
+// The success state has no frame: the section's `Success?` decision goes
+// straight to `Next module/screen`. It is built as the error's mirror on the
+// same archetype and recorded as added, not traced (DEVIATIONS.md #DIW-1).
+
+/** Which wallet row the chooser offers. iOS shows Apple Wallet and Android
+ *  Google Wallet, first and tagged Instant; web shows a plain Digital ID row
+ *  last (`[Web] Device Wallets`, 26106:13011), which opens the browser's
+ *  wallet sheet. */
+export type DigitalIdDeviceWalletsPlatformWallet = 'apple' | 'google' | 'digital-id';
+
+/** The two verdicts the wallet hand-back can land on. */
+export type DigitalIdDeviceWalletsResultState = 'success' | 'error';
+
+/** What the person picked on the chooser. `wallet` stays in this module; `id`
+ *  and `passport` hand off to ID Capture. */
+export type DigitalIdDeviceWalletsOption = 'wallet' | 'id' | 'passport';
+
+export interface DigitalIdDeviceWalletsStrings {
+  /** Accessible name for the logo nav region (i18n — no baked-in English). */
+  navLabel?: string;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+
+  /** `1-1-1-how to verify` (node 26106:12647). */
+  documentSelection: {
+    /** "Select how to verify" */
+    title: string;
+    subtitle?: string;
+    /** "Apple Wallet" */
+    appleWalletLabel: string;
+    /** "Google Wallet" — the Android row. */
+    googleWalletLabel: string;
+    /** "Digital ID" — the web row. */
+    digitalIdLabel: string;
+    /** "Instant" — the tag under the wallet row. */
+    instantLabel: string;
+    /** "Identity Card" */
+    idLabel: string;
+    /** "Passport" */
+    passportLabel: string;
+  };
+
+  /** `Successfully verified` (node 26598:16374) — no button (DEVIATIONS.md #DIW-1). */
+  success: {
+    /** "Identity successfully verified" — the NFC / OCR Review success title. */
+    title: string;
+    subtitle?: string;
+    /** No button by default: like Face Capture's success, the flow moves on by
+     *  itself after 3 s. Set it only for a host that waits for a tap. */
+    ctaLabel?: string;
+  };
+
+  /** `Digital ID Generic Error` (node 26540:5685). */
+  error: {
+    /** "Couldn't verify your ID" */
+    title: string;
+    /** "Please try again" */
+    subtitle?: string;
+    /** "Try again" */
+    ctaLabel: string;
+    /** "Choose another method" — web only: back to the chooser, the SDK's
+     *  `deviceWalletUseAnotherMethod()`. Absent, the screen has one button. */
+    secondaryCtaLabel?: string;
+  };
+}

package/src/DigitalIdProvidersDocumentSelectionScreen.tsx

@@ -0,0 +1,113 @@
+import React, { forwardRef } from 'react';
+import { PrizmaCardListVerificationOptions } from '@incodetech/prizma-core-web/card-list';
+import { PrizmaCountryFlag } from '@incodetech/prizma-core-web/combined';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  DigitalIdProvidersSelection,
+  DigitalIdProvidersStrings,
+} from './DigitalIdProvidersStrings';
+import './ScreenLayout.css';
+import './DigitalIdProvidersLayout.css';
+
+export interface DigitalIdProvidersDocumentSelectionScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    'title' | 'subtitle' | 'children' | 'listAlign' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `documentSelection` slice. */
+  strings: DigitalIdProvidersStrings;
+  /** How many providers to list; all of them when absent. The frame's first
+   *  state (27753:8099) shows six, the full list (27703:4895) scrolls. */
+  providerCount?: number;
+  /** Fired with what was picked; `onAction` still reports the tap. */
+  onOptionSelect?: (selection: DigitalIdProvidersSelection) => void;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Digital ID Providers — choose how to verify: your own ID, or a Digital ID
+ * provider, on the `PrizmaListScreen` archetype (GUIDELINES.md §6-G).
+ * Figma: `Document Chooser` (27753:8099) and the full list (27703:4895).
+ *
+ * Two of Core's card lists, each under a section label, after a "Viewing
+ * options for" country line with Core's flag. Every row is Core's; a
+ * provider leads with its logo from the backend catalog, or Core's generic
+ * `digital-id-web` card icon when it has none (DEVIATIONS #DIP-1), and the Identity Card
+ * row has no second line, which Core's row cannot draw (#DIP-3).
+ */
+export const DigitalIdProvidersDocumentSelectionScreen = forwardRef<
+  HTMLDivElement,
+  DigitalIdProvidersDocumentSelectionScreenProps
+>(
+  (
+    {
+      strings,
+      providerCount,
+      onOptionSelect,
+      screenId = 'digital-id-providers-document-selection',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = strings.documentSelection;
+    const providers =
+      providerCount === undefined ? copy.providers : copy.providers.slice(0, providerCount);
+    const choose = (selection: DigitalIdProvidersSelection) => {
+      onOptionSelect?.(selection);
+      onAction?.({ type: 'cta', screenId });
+    };
+
+    return (
+      <PrizmaListScreen
+        ref={ref}
+        title={copy.title}
+        listAlign="start"
+        scrollList
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        <div className="digital-id-providers-chooser">
+          <p className="digital-id-providers-country">
+            {copy.countryLabel}
+            <PrizmaCountryFlag
+              country={{ code: copy.countryCode, name: copy.countryName, dialCode: '', flag: '' }}
+            />
+            <span className="digital-id-providers-country__name">{copy.countryName}</span>
+          </p>
+          <section className="digital-id-providers-section">
+            <p className="digital-id-providers-section__label">{copy.idSectionLabel}</p>
+            <PrizmaCardListVerificationOptions
+              items={[
+                { icon: 'id', title: copy.idLabel, onClick: () => choose({ kind: 'id' }) },
+                { icon: 'passport', title: copy.passportLabel, onClick: () => choose({ kind: 'passport' }) },
+              ]}
+            />
+          </section>
+          <section className="digital-id-providers-section">
+            <p className="digital-id-providers-section__label">{copy.providersSectionLabel}</p>
+            <PrizmaCardListVerificationOptions
+              items={providers.map(provider => ({
+                icon: 'digital-id-web' as const,
+                logo: provider.logo,
+                title: provider.label,
+                onClick: () => choose({ kind: 'provider', providerId: provider.id }),
+              }))}
+            />
+          </section>
+        </div>
+      </PrizmaListScreen>
+    );
+  },
+);
+DigitalIdProvidersDocumentSelectionScreen.displayName = 'DigitalIdProvidersDocumentSelectionScreen';
+
+export default DigitalIdProvidersDocumentSelectionScreen;

package/src/DigitalIdProvidersErrorScreen.tsx

@@ -0,0 +1,104 @@
+import React, { forwardRef } from 'react';
+import { PrizmaCardDocumentList } from '@incodetech/prizma-core-web/card';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  DigitalIdProvidersErrorState,
+  DigitalIdProvidersStrings,
+} from './DigitalIdProvidersStrings';
+import './ScreenLayout.css';
+
+export interface DigitalIdProvidersErrorScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'children'
+    | 'ctaLabel'
+    | 'secondaryCtaLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `errors` slice for its `state`, and
+   *  `acceptedDocuments` on the two document states. */
+  strings: DigitalIdProvidersStrings;
+  state: DigitalIdProvidersErrorState;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/** The two states that list the documents accepted instead. */
+const LISTS_DOCUMENTS: ReadonlySet<DigitalIdProvidersErrorState> = new Set(['not-accepted', 'expired']);
+
+/**
+ * Digital ID Providers — the five failures of a provider run, on the
+ * `PrizmaResultScreen` archetype (GUIDELINES.md §6-F). Figma: `Errors`
+ * (27707:9338).
+ *
+ *   unavailable     the provider could not be reached — Scan ID instead
+ *   consent-denied  the person did not grant sharing at the provider
+ *   timed-out       the provider session did not finish in time
+ *   not-accepted    the ID behind the provider is not one the flow accepts
+ *   expired         the ID behind the provider has expired
+ *
+ * Every state has two buttons, the second "Choose another method" (#DIP-4).
+ * The two document states carry Core's `PrizmaCardDocumentList` in the
+ * archetype's `children` slot, the same recipe ID Capture's document error
+ * uses. The first three keep the footer tag as drawn; the two document states
+ * drop it, as drawn.
+ */
+export const DigitalIdProvidersErrorScreen = forwardRef<
+  HTMLDivElement,
+  DigitalIdProvidersErrorScreenProps
+>(
+  (
+    {
+      strings,
+      state,
+      screenId = `digital-id-providers-error-${state}`,
+      showHeader = false,
+      showFooter,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = strings.errors[state];
+    const listsDocuments = LISTS_DOCUMENTS.has(state);
+    const docs = strings.acceptedDocuments;
+    return (
+      <PrizmaResultScreen
+        ref={ref}
+        status="error"
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        secondaryCtaLabel={copy.secondaryCtaLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        showHeader={showHeader}
+        showFooter={showFooter ?? !listsDocuments}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        {listsDocuments ? (
+          <PrizmaCardDocumentList
+            state="default"
+            countryCode={docs.countryCode}
+            flag={docs.flag}
+            country={docs.country}
+            documents={docs.documents}
+          />
+        ) : null}
+      </PrizmaResultScreen>
+    );
+  },
+);
+DigitalIdProvidersErrorScreen.displayName = 'DigitalIdProvidersErrorScreen';
+
+export default DigitalIdProvidersErrorScreen;

package/src/DigitalIdProvidersLayout.css

@@ -0,0 +1,47 @@
+/* Digital ID Providers — the chooser's country line and section labels.
+ *
+ * Archetype G has one list slot and no section-label recipe; the provider
+ * chooser (27753:8099) groups two Core card lists under labels ("Use your ID",
+ * "Digital ID verification") with a "Viewing options for 🇺🇸 US" line under the
+ * title. Composed here from tokens only, like Reusability's rows (#RU-1);
+ * DEVIATIONS #DIP-2 asks for a foundation recipe. */
+
+.digital-id-providers-chooser {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-24);
+}
+
+.digital-id-providers-country {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--prizma-spacing-8);
+  color: var(--prizma-text-body-500-secondary);
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-body-m-regular-font-size);
+  font-weight: var(--prizma-body-m-regular-font-weight);
+  line-height: var(--prizma-body-m-regular-line-height);
+  letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+}
+
+.digital-id-providers-country__name {
+  color: var(--prizma-text-body-800-primary);
+  text-decoration: underline;
+}
+
+.digital-id-providers-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prizma-spacing-8);
+}
+
+.digital-id-providers-section__label {
+  margin: 0;
+  color: var(--prizma-text-body-500-secondary);
+  font-family: var(--prizma-body-family);
+  font-size: var(--prizma-body-m-regular-font-size);
+  font-weight: var(--prizma-body-m-regular-font-weight);
+  line-height: var(--prizma-body-m-regular-line-height);
+  letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+}

package/src/DigitalIdProvidersRedirectScreen.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef } from 'react';
+import { PrizmaProcessingScreen, type PrizmaProcessingScreenProps } from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DigitalIdProvidersStrings } from './DigitalIdProvidersStrings';
+import './ScreenLayout.css';
+
+export interface DigitalIdProvidersRedirectScreenProps
+  extends Omit<
+    PrizmaProcessingScreenProps,
+    'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `redirecting` slice. */
+  strings: DigitalIdProvidersStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Digital ID Providers — "Redirecting for verification…", the wait before the
+ * browser leaves for the provider's site, on the `PrizmaProcessingScreen`
+ * archetype (GUIDELINES.md §6-C). Figma: the `1-18-1-id-hold-on` instance in
+ * the web full flow (27707:9281), with the module's own copy. The Web SDK's
+ * `digitalIdRedirect` phases `loading` and `redirecting` both look like this.
+ * Built like Core's other processing screens: the archetype as-is, with the
+ * logo nav and the footer tag (DEVIATIONS #DIP-9).
+ */
+export const DigitalIdProvidersRedirectScreen = forwardRef<
+  HTMLDivElement,
+  DigitalIdProvidersRedirectScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'digital-id-providers-redirecting',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaProcessingScreen
+      ref={ref}
+      status="loading"
+      title={strings.redirecting.title}
+      subtitle={strings.redirecting.subtitle}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+DigitalIdProvidersRedirectScreen.displayName = 'DigitalIdProvidersRedirectScreen';
+
+export default DigitalIdProvidersRedirectScreen;