@sonata-innovations/fiber-fbre 3.2.0 → 3.3.0

package/README.md

@@ -99,7 +99,7 @@ Render a Flow object you already have in memory.
 | `controls` | `ControlsConfig` | No | Override controls settings (merged over `flow.config.controls`) |
 | `context` | `Record<string, string \| boolean \| number>` | No | External context values for condition evaluation and calculations |
 | `storeRef` | `MutableRefObject<StoreApi<FBREStoreState> \| null>` | No | Ref to access the Zustand store |
-| `onFlowComplete` | `(data: FlowData) => void` | Yes | Called when the user completes the flow |
+| `onFlowComplete` | `(data: FlowData) => void \| ConfirmationResult \| Promise<void \| ConfirmationResult>` | Yes | Called when the user completes the flow. Return/resolve a `ConfirmationResult` to override the configured confirmation message; a rejected Promise surfaces a completion error |
 | `onScreenChange` | `(index: number, data: FlowData) => void` | No | Called on screen navigation |
 | `onScreenValidationChange` | `(index: number, data: any) => void` | No | Called when screen validity changes |
 
@@ -120,7 +120,7 @@ Fetch a published flow from a Fiber API by ID.
 | `controls` | `ControlsConfig` | No | Override controls settings |
 | `context` | `Record<string, string \| boolean \| number>` | No | External context values for condition evaluation and calculations |
 | `storeRef` | `MutableRefObject<StoreApi<FBREStoreState> \| null>` | No | Ref to access the Zustand store |
-| `onFlowComplete` | `(data: FlowData) => void` | Yes | Called when the user completes the flow |
+| `onFlowComplete` | `(data: FlowData) => void \| ConfirmationResult \| Promise<void \| ConfirmationResult>` | Yes | Called when the user completes the flow. Return/resolve a `ConfirmationResult` to override the configured confirmation message; a rejected Promise surfaces a completion error |
 | `onScreenChange` | `(index: number, data: FlowData) => void` | No | Called on screen navigation |
 | `onScreenValidationChange` | `(index: number, data: any) => void` | No | Called when screen validity changes |
 
@@ -194,6 +194,8 @@ import type {
   ThemeConfig,
   NavigationConfig,
   ControlsConfig,
+  ConfirmationConfig,
+  ConfirmationResult,
   FlowMetadata,
   Component,
   ComponentProperties,
@@ -220,13 +222,34 @@ import type {
 } from "@sonata-innovations/fiber-fbre";
 ```
 
+## Confirmation Screen
+
+A terminal "thank you" screen shown after submission, configured on the flow (`config.confirmation`) — not a `Screen`. Renders only when `show` is not `false` and `title`/`body` has content, replacing the final screen and hiding the controls/stepper. `title`/`body` support `${...}` reference markup (collected fields, calculations, and `context` values by name).
+
+```tsx
+const flow = {
+  ...myFlow,
+  config: { ...myFlow.config, confirmation: { show: true, title: "Thank you!", body: "Submitted, ${email}." } },
+};
+<FBRE flow={flow} onFlowComplete={handleComplete} />
+```
+
+`onFlowComplete` decides *when* it shows: return `void` → shows immediately; return a `Promise` → the submit button stays in-flight until it settles (resolve shows it, **reject** shows a completion error instead); return/resolve a `ConfirmationResult` (`{ title?, body? }`) → overrides the configured message, e.g. with a server reference number.
+
+```tsx
+const handleComplete = async (data: FlowData): Promise<ConfirmationResult> => {
+  const { referenceId } = await saveToBackend(data);
+  return { title: "All done!", body: `Reference: ${referenceId}.` };
+};
+```
+
 ## Flow JSON Schema
 
 ```
 Flow
 ├── uuid: string
 ├── metadata: { name?, description?, ...}
-├── config?: { mode?, theme?: { color?, colorScheme?, style?, background?, surface?, text?, border?, radius?, fontFamily?, error?, success?, warning? }, navigation?: { transition?, allowInvalidTransition? }, controls?: { show?, layout?, showStepper? }, summary? }
+├── config?: { mode?, theme?: { color?, colorScheme?, style?, background?, surface?, text?, border?, radius?, fontFamily?, error?, success?, warning? }, navigation?: { transition?, allowInvalidTransition? }, controls?: { show?, layout?, showStepper? }, summary?, confirmation?: { show?, title?, body? } }
 └── screens: FlowScreen[]
     ├── uuid: string
     ├── label?: string