@incodetech/prizma-core-screens 0.1.2 → 0.2.3

package/src/DemoScreensStrings.ts

@@ -1,31 +1,224 @@
 // Demo screens — copy contract for the GENERIC family.
 //
-// Figma: `Module Generic Screens` (qGJjfL4O0JSjz1x4tOjJn8), frame `63:399`.
+// Figma, two sources:
+//   · `Demo App - Latest Design` (FA4ZXKH3meKQnFmDsBsMdk), page "Full flow map",
+//     section `Web` (2010:5731) — the flow the Demo App runs in production on
+//     the web, phone and desktop: splash → start → (settings) → running →
+//     approved / rejected. Traced 2026-09-24.
+//   · `Module Generic Screens` (qGJjfL4O0JSjz1x4tOjJn8), frame `63:399`, and the
+//     same file's "DemoApp: End Screens" thread — the two end screens that are
+//     not a verdict: the result is with a human (`end`), or the flow broke
+//     before it reached one (`notCompleted`).
 //
 // The screens that bracket a DEMO session rather than a real one — what a
-// prospect sees at the two ends of a sample flow. They are generic by
-// definition: the demo does not belong to any module, it strings several of
+// prospect sees before the first module and after the last. They are generic
+// by definition: the demo does not belong to any module, it strings several of
 // them together.
 //
-// ONLY the end screen exists so far. The owner is supplying the start screen
-// separately (Camila 2026-09-03: "that's the end screen but we need the start
-// too, I will add it some other time"), so `start` is deliberately absent from
-// this contract rather than guessed — an invented start screen would be a
-// second source of truth for a frame that already exists in someone's file.
-//
-// The family has no flow of its own. Core Lab lists it as a library of states.
-//
 // No hardcoded English anywhere in a screen: every visible string arrives here.
 
+export interface DemoScreensLanguage {
+  /** The dropdown option value — a BCP 47 tag (`en-US`, `es-MX`). */
+  value: string;
+  /** The row label, exactly as the app lists it ("English (US)"). */
+  label: string;
+  /** ISO 3166-1 alpha-2 code for the canonical flag bank (`US`, `RS`). Absent
+   *  when the bank has no raster for that country yet — the row then draws
+   *  no flag rather than an emoji. */
+  countryCode?: string;
+}
+
+/** One row of a picker: an environment, a flow. */
+export interface DemoScreensOption {
+  value: string;
+  label: string;
+}
+
 export interface DemoScreensStrings {
   /** Accessible name for the logo nav region (i18n — no baked-in English). */
   navLabel?: string;
   /** "verified by" attribution copy for the footer tag. */
   verifiedLabel: string;
+  /** The caption under the wordmark on the splash and the start screen. */
+  appName: string;
+
+  /** NATIVE · `Configuration` (2010:4704) — Client ID + Environment before the
+   *  app knows who you are. `demo_2` empty, `demo_4` filled, `demo_3` custom
+   *  URL, `Error Client ID` (2116:10697). */
+  config: {
+    clientIdLabel: string;
+    clientIdPlaceholder: string;
+    /** The value the filled states show. */
+    clientIdValue: string;
+    /** Error line under a Client ID the backend rejected. */
+    clientIdError: string;
+    environmentLabel: string;
+    environmentPlaceholder: string;
+    environments: DemoScreensOption[];
+    /** The environment whose choice reveals the URL field. */
+    customEnvironment: string;
+    urlLabel: string;
+    urlValue: string;
+    ctaLabel: string;
+  };
+
+  /** NATIVE · `Accept Terms` (2010:4923 · 4012:8731) — two documents, each
+   *  with its consent checkbox. */
+  terms: {
+    /** "Last Modified: August 5, 2024" — the line under the logo. */
+    lastModified: string;
+    documents: Record<'terms' | 'privacy', { consentLabel: string; body: string }>;
+    ctaLabel: string;
+  };
+
+  /** NATIVE · `Launch screen` (2010:5024) · `Loading` (2082:8004) — the app
+   *  is configured; one CTA runs the flow. */
+  launch: {
+    /** "Flow: Digital ID Flow" — the header's left text. */
+    flowLabel: string;
+    menuLabel: string;
+    ctaLabel: string;
+    /** "Environment:" — the caption under the CTA … */
+    environmentCaption: string;
+    /** … and its highlighted value ("Stage"). */
+    environmentValue: string;
+    /** Snackbar after the configuration sheet saved ("Flow saved"). */
+    savedSnackbar: string;
+  };
+
+  /** NATIVE · `Configuration › Demo config screen` (2118:20999) — the sheet
+   *  the menu opens: pick a flow, or go edit Client ID / Environment. */
+  configSheet: {
+    title: string;
+    subtitle: string;
+    closeLabel: string;
+    flowLabel: string;
+    /** The flow shown before any change ("Build Predefined"). */
+    flowValue: string;
+    /** The flow the `selected` state shows ("uxv2"). */
+    flowSelected: string;
+    flows: DemoScreensOption[];
+    searchPlaceholder: string;
+    clearSearchLabel: string;
+    /** The two read-only lines under the picker. */
+    clientIdLine: string;
+    environmentLine: string;
+    saveLabel: string;
+    editLinkLabel: string;
+    /** "Build: 2020" — the caption at the foot of both sheets. */
+    buildLabel: string;
+    savedSnackbar: string;
+  };
+
+  /** NATIVE · `Edit Client ID or Environment` (2118:21000 …) — the second
+   *  sheet, reached from the first. */
+  editSheet: {
+    title: string;
+    subtitle: string;
+    backLabel: string;
+    closeLabel: string;
+    clientIdLabel: string;
+    clientIdValue: string;
+    clientIdError: string;
+    environmentLabel: string;
+    /** The environment shown before any change ("Kubernetes Stage"). */
+    environmentValue: string;
+    /** The environment the `filled` state shows ("Demo"). */
+    environmentSelected: string;
+    environments: DemoScreensOption[];
+    ctaLabel: string;
+    buildLabel: string;
+  };
+
+  /** DESKTOP · `Redirect` (4272:11166) — the browser page that hands the
+   *  session to a phone: a QR, or a link by SMS, or carry on right here. */
+  redirect: {
+    title: string;
+    /** Under the title when both QR and SMS are offered. */
+    subtitle: string;
+    /** Under the title when only the QR is offered, with the desktop option … */
+    subtitleQrDesktop: string;
+    /** … and without it. */
+    subtitleQrOnly: string;
+    tabs: { qr: string; sms: string };
+    /** "Scan the QR code to verify on your mobile device." */
+    qrHint: string;
+    /** "Enter your phone number to receive a link to verify via SMS" */
+    smsHint: string;
+    phoneLabel: string;
+    phonePlaceholder: string;
+    /** The typed number the filled state shows. */
+    phoneValue: string;
+    /** ISO code of the country the picker opens on (`RS`). */
+    countryCode: string;
+    sendLabel: string;
+    /** "or" — between the phone leg and the desktop option. */
+    orLabel: string;
+    desktopLabel: string;
+    sent: {
+      title: string;
+      /** "To" — followed by the dial code and number. */
+      toPrefix: string;
+      /** "Resend in 30s" — the countdown state. */
+      resendIn: string;
+      /** "Resend" — once the countdown is over. */
+      resend: string;
+      changeLabel: string;
+      resentSnackbar: string;
+    };
+    tooMany: {
+      title: string;
+      subtitle: string;
+      changeLabel: string;
+    };
+  };
+
+  /** WEB · `demo_2` — the front door: language, the wordmark, one CTA. */
+  start: {
+    /** Small label over the current language, top left. */
+    languageLabel: string;
+    /** The current language as the front door shows it ("English (US)"). */
+    languageValue: string;
+    /** Accessible name for the menu affordance, top right. */
+    menuLabel: string;
+    ctaLabel: string;
+  };
+
+  /** `demo_3` … `demo_5` — the settings sheet: one dropdown, Done. */
+  settings: {
+    title: string;
+    closeLabel: string;
+    languageLabel: string;
+    languages: DemoScreensLanguage[];
+    searchPlaceholder: string;
+    clearSearchLabel: string;
+    ctaLabel: string;
+  };
+
+  /** `demo_6` — the wait while the session is scored. */
+  running: {
+    title: string;
+    subtitle?: string;
+  };
+
+  /** `demo_7` / `demo_8` — the two verdicts the production app renders. */
+  result: {
+    approved: { title: string; subtitle?: string };
+    rejected: { title: string; subtitle?: string };
+    /** The CTA under a verdict ("Restart onboarding"). */
+    restartLabel: string;
+  };
 
   /** `63:399` — the demo is over and the result is with a human. */
   end: {
     title: string;
     subtitle?: string;
   };
+
+  /** "DemoApp: End Screens" · `Processnotcompleted` — the flow broke before a
+   *  verdict; the app currently shows this title over the error's message. */
+  notCompleted: {
+    title: string;
+    subtitle?: string;
+  };
 }

package/src/DemoScreensTermsScreen.tsx

@@ -0,0 +1,82 @@
+import React, { forwardRef } from 'react';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaCheckbox } from '@incodetech/prizma-core-web/checkbox';
+import { PrizmaLogo } from '@incodetech/prizma-core-web/logo';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler } from './types';
+import type { DemoScreensStrings } from './DemoScreensStrings';
+import './ScreenLayout.css';
+import './DemoScreensLayout.css';
+
+export interface DemoScreensTermsScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+  /** Family copy — this screen reads the `terms` slice. */
+  strings: DemoScreensStrings;
+  /** Which document is on screen. Default `terms`. */
+  document?: 'terms' | 'privacy';
+  /** The consent box is ticked and Continue is live. */
+  accepted?: boolean;
+  screenId?: string;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Demo screens · NATIVE — `Accept Terms` (2010:4923 · 4012:8731): the logo on
+ * the left, the "Last Modified" line, the document scrolling in the middle,
+ * and the consent checkbox over the CTA. Two documents, Terms of Use then
+ * Privacy Policy, each in an unchecked and a checked state.
+ *
+ * No archetype has a left-aligned logo or a scrolling document body, so the
+ * screen composes Core's Logo, Checkbox and Button over the layout classes.
+ * The document text arrives through `strings`, as every other string does.
+ */
+export const DemoScreensTermsScreen = forwardRef<HTMLDivElement, DemoScreensTermsScreenProps>(
+  (
+    {
+      strings,
+      document = 'terms',
+      accepted = false,
+      screenId = `demo-screens-${document}${accepted ? '-accepted' : ''}`,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const t = strings.terms;
+    const doc = t.documents[document];
+    return (
+      <PrizmaScreenShell ref={ref} data-screen-id={screenId} {...shell}>
+        <header className="demo-screens-terms__header" aria-label={strings.navLabel}>
+          <PrizmaLogo variant="incode" />
+        </header>
+        <div className="prizma-screen-layout__content">
+          <p className="demo-screens-terms__meta">{t.lastModified}</p>
+          <div className="demo-screens-terms__body">{doc.body}</div>
+        </div>
+        <div className="prizma-screen-layout__band prizma-screen-layout__band--bare demo-screens-band">
+          <div className="demo-screens-terms__consent">
+            <PrizmaCheckbox
+              size="M"
+              checked={accepted}
+              label={doc.consentLabel}
+              onCheckedChange={() => onAction?.({ type: 'secondary', screenId })}
+            />
+          </div>
+          <div className="prizma-screen-layout__band__ctas">
+            <PrizmaButton
+              variant="primary"
+              size="L"
+              disabled={!accepted}
+              onClick={() => onAction?.({ type: 'cta', screenId })}
+            >
+              {t.ctaLabel}
+            </PrizmaButton>
+          </div>
+        </div>
+      </PrizmaScreenShell>
+    );
+  },
+);
+DemoScreensTermsScreen.displayName = 'DemoScreensTermsScreen';
+
+export default DemoScreensTermsScreen;

package/src/EkybAddressDetailsScreen.tsx

@@ -3,7 +3,7 @@ import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
 import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
 import { PrizmaButton } from '@incodetech/prizma-core-web/button';
 import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
-import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import { PrizmaFormScreen, PrizmaFormRow, type PrizmaFormScreenProps } from './FormScreen';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type {
   EkybAddressState,
@@ -136,6 +136,10 @@ export const EkybAddressDetailsScreen = forwardRef<
         screenId={screenId}
         overrides={{ align: overrides?.align ?? 'left', logo: overrides?.logo }}
         onAction={onAction}
+        /* Exploration ekyb-desktop: on a wide frame only State + Postal code
+           share a row (Figma 6407:43637); the four text fields above span the
+           column. On the phone nothing changes. */
+        responsive
         {...shell}
       >
         <PrizmaTextField
@@ -169,6 +173,7 @@ export const EkybAddressDetailsScreen = forwardRef<
           autoComplete="off"
           defaultValue={values?.city ?? ''}
         />
+        <PrizmaFormRow>
         <PrizmaDropdown
           label={copy.state.label}
           placeholder={copy.state.placeholder}
@@ -191,6 +196,7 @@ export const EkybAddressDetailsScreen = forwardRef<
           autoComplete="off"
           defaultValue={values?.postalCode ?? ''}
         />
+        </PrizmaFormRow>
       </PrizmaFormScreen>
     );
   },

package/src/EkybBusinessDetailsScreen.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
 import { PrizmaButton } from '@incodetech/prizma-core-web/button';
 import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
-import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import { PrizmaFormScreen, PrizmaFormRow, type PrizmaFormScreenProps } from './FormScreen';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type { EkybBusinessState, EkybBusinessValues, EkybStrings } from './EkybStrings';
 import './ScreenLayout.css';
@@ -120,8 +120,12 @@ export const EkybBusinessDetailsScreen = forwardRef<
            `align` still wins (#GEO-2). */
         overrides={{ align: overrides?.align ?? 'left', logo: overrides?.logo }}
         onAction={onAction}
+        /* Exploration ekyb-desktop: on a tablet or desktop frame the two
+           fields share a row; on the phone nothing changes. */
+        responsive
         {...shell}
       >
+        <PrizmaFormRow>
         <PrizmaTextField
           label={copy.businessName.label}
           placeholder={copy.businessName.placeholder}
@@ -138,6 +142,7 @@ export const EkybBusinessDetailsScreen = forwardRef<
           autoComplete="off"
           defaultValue={values?.taxId ?? ''}
         />
+        </PrizmaFormRow>
       </PrizmaFormScreen>
     );
   },

package/src/EkybOwnersScreen.tsx

@@ -3,7 +3,7 @@ import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
 import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
 import { PrizmaButton } from '@incodetech/prizma-core-web/button';
 import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
-import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import { PrizmaFormScreen, PrizmaFormRow, type PrizmaFormScreenProps } from './FormScreen';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type { EkybOwnersState, EkybOwnersValues, EkybStrings } from './EkybStrings';
 import './ScreenLayout.css';
@@ -52,6 +52,10 @@ export interface EkybOwnersScreenProps
  * - `uboFilled`      5707:49608 — UBO block only, both fields carrying a value
  * - `directorEmpty`  5655:56032 — UBO block + Director block, all four blank
  * - `directorFilled` 5707:49782 — UBO block + Director block, all four filled
+ * - `uboAdded`       (no frame) — `directorFilled` after "Add another UBO": a
+ *   second, blank UBO pair under the first with its own "Remove UBO" link,
+ *   then the same "Add another UBO" link and the Director block. Elena asked
+ *   for the screen the link leads to (2026-09-24); the frames stop at the link.
  * - `loading`        5663:94390 — `directorFilled` with the submission in
  *   flight: every field, both "Add another" links and "Back" go inert, and the
  *   spinner rides the CTA, never a field (the Phone Input lesson, #PI-5)
@@ -106,8 +110,9 @@ export const EkybOwnersScreen = forwardRef<HTMLDivElement, EkybOwnersScreenProps
   ) => {
     const copy = strings.owners;
     const busy = state === 'loading';
+    const secondUbo = state === 'uboAdded';
     const showDirector =
-      state === 'directorEmpty' || state === 'directorFilled' || busy;
+      state === 'directorEmpty' || state === 'directorFilled' || secondUbo || busy;
 
     return (
       <PrizmaFormScreen
@@ -148,8 +153,12 @@ export const EkybOwnersScreen = forwardRef<HTMLDivElement, EkybOwnersScreenProps
         screenId={screenId}
         overrides={{ align: overrides?.align ?? 'left', logo: overrides?.logo }}
         onAction={onAction}
+        /* Exploration ekyb-desktop: name + surname share a row per block on a
+           wide frame; on the phone nothing changes. */
+        responsive
         {...shell}
       >
+        <PrizmaFormRow>
         <PrizmaTextField
           label={copy.uboName.label}
           placeholder={copy.uboName.placeholder}
@@ -167,6 +176,39 @@ export const EkybOwnersScreen = forwardRef<HTMLDivElement, EkybOwnersScreenProps
           defaultValue={values?.uboSurname ?? ''}
           disabled={busy}
         />
+        </PrizmaFormRow>
+        {secondUbo ? (
+          <>
+            {/* The second UBO: the same two fields, blank, and the way back. */}
+            <PrizmaFormRow>
+              <PrizmaTextField
+                label={copy.uboName.label}
+                placeholder={copy.uboName.placeholder}
+                required
+                requiredHint={strings.requiredHint}
+                autoComplete="off"
+                defaultValue={values?.secondUboName ?? ''}
+              />
+              <PrizmaTextField
+                label={copy.uboSurname.label}
+                placeholder={copy.uboSurname.placeholder}
+                autoComplete="off"
+                defaultValue={values?.secondUboSurname ?? ''}
+              />
+            </PrizmaFormRow>
+            {copy.removeUboLabel ? (
+              <PrizmaButton
+                variant="tertiary-link"
+                size="L"
+                onClick={() =>
+                  onAction?.({ type: 'tertiary', screenId: `${screenId}-remove-ubo` })
+                }
+              >
+                {copy.removeUboLabel}
+              </PrizmaButton>
+            ) : null}
+          </>
+        ) : null}
         <PrizmaButton
           variant="tertiary-link"
           size="L"
@@ -192,6 +234,7 @@ export const EkybOwnersScreen = forwardRef<HTMLDivElement, EkybOwnersScreenProps
               showSubtitle={Boolean(copy.directorSubtitle)}
               subtitle={copy.directorSubtitle}
             />
+            <PrizmaFormRow>
             <PrizmaTextField
               label={copy.directorName.label}
               placeholder={copy.directorName.placeholder}
@@ -206,6 +249,7 @@ export const EkybOwnersScreen = forwardRef<HTMLDivElement, EkybOwnersScreenProps
               defaultValue={values?.directorSurname ?? ''}
               disabled={busy}
             />
+            </PrizmaFormRow>
             <PrizmaButton
               variant="tertiary-link"
               size="L"

package/src/EkybStrings.ts

@@ -55,6 +55,10 @@ export type EkybAddressState = 'empty' | 'filled';
  * - `directorEmpty` — `eKYB.director.empty` (5655:56032): UBO block plus the
  *   Director block, every field blank
  * - `directorFilled`— `eKYB.directorFilled` (5707:49782): all four filled
+ * - `uboAdded`      — what "Add another UBO" does: a second UBO name + surname
+ *   pair opens under the first, blank, with a "Remove" link of its own, and the
+ *   Director block below as before. Not a Figma frame — the frames draw the
+ *   link and stop there; Elena asked for the screen it leads to (2026-09-24).
  * - `loading`       — `eKYB.directorloading` (5663:94390): the submission is in
  *   flight, so EVERY field, both "Add another" links and "Back" go inert and
  *   the spinner rides the CTA, never a field (the Phone Input lesson,
@@ -65,6 +69,7 @@ export type EkybOwnersState =
   | 'uboFilled'
   | 'directorEmpty'
   | 'directorFilled'
+  | 'uboAdded'
   | 'loading';
 
 /**
@@ -106,6 +111,9 @@ export interface EkybAddressValues {
 export interface EkybOwnersValues {
   uboName?: string;
   uboSurname?: string;
+  /** The second UBO, present only in `uboAdded`. */
+  secondUboName?: string;
+  secondUboSurname?: string;
   directorName?: string;
   directorSurname?: string;
 }
@@ -213,6 +221,10 @@ export interface EkybStrings {
     uboSurname: EkybFieldStrings;
     /** The tertiary link under the UBO block ("Add another UBO (Optional)"). */
     addUboLabel: string;
+    /** The tertiary link under a second UBO's pair ("Remove UBO"), `uboAdded`
+     *  only. Optional so existing hosts keep compiling; without it the second
+     *  pair cannot be taken away again. */
+    removeUboLabel?: string;
     /** The Director block's own heading + description. Rendered by Core's
      *  `PrizmaTitle` inside the field stack; see the screen's docstring and the
      *  module's reported deviation about the second heading. */