@myazahq/kyc-sdk-react-native 2.2.0 → 2.4.0

package/src/store/kycStore.ts

@@ -27,6 +27,7 @@ import {
   type KycStore,
 } from './state';
 import { nextStepAfter, nfcDecision, previousStepBefore } from './derive';
+import { recordStep, resetStepLog } from '../lib/step-log';
 import { buildVerifyRequest } from './submit';
 import { applicantMediaCaptured, buildApplicantVerifyRequest } from './submitApplicant';
 
@@ -54,7 +55,7 @@ export function createKycStore(
   const baseUrl = resolveBaseUrl(config.apiKey, config.devUrl);
   const api = createKYCApi(baseUrl, config.apiKey);
 
-  return createStore<KycState>((set, get) => {
+  const store = createStore<KycState>((set, get) => {
     function emitStepChange(step: KYCStep): void {
       config.onStepChange?.(step);
     }
@@ -354,6 +355,11 @@ export function createKycStore(
       },
 
       reset() {
+        // Fresh step journey per session; the explicit record covers a store
+        // already sitting on 'consent' (the subscribe below only fires on
+        // change, and recordStep dedupes if it fires too).
+        resetStepLog();
+        recordStep('consent');
         set({
           currentStep: 'consent',
           selectedCountry: null,
@@ -383,6 +389,24 @@ export function createKycStore(
       },
     };
   });
+
+  // Step journey log — records every step the user reaches (the subscription
+  // catches ALL currentStep writes, whatever action made them; recordStep
+  // collapses consecutive duplicates). Rides the submission as
+  // metadata.device.stepLog for the dashboard timeline.
+  store.subscribe((s, prev) => {
+    if (s.currentStep !== prev.currentStep) recordStep(s.currentStep);
+  });
+
+  // A fresh store IS a fresh session: the runtime provider creates one per
+  // modal launch and reset() is NOT part of the open path, so the journey
+  // starts here — and the opening step must be recorded explicitly (the
+  // subscription above only fires on CHANGE, and a new store already sits on
+  // 'consent').
+  resetStepLog();
+  recordStep(store.getState().currentStep);
+
+  return store;
 }
 
 // Re-export the flow helpers for tests + screens that need to reason about

package/src/types/config.ts

@@ -61,6 +61,9 @@ export type KYCStep =
 // Client-side SDK config  (MyazaKYC.show() / useMyazaKYC options)
 // ---------------------------------------------------------------------------
 
+/** How flow progress is drawn — see {@link MyazaKYCConfig.progressStyle}. */
+export type ProgressStyle = 'steps' | 'bar' | 'none';
+
 export interface MyazaKYCConfig<C extends SupportedCountry = SupportedCountry> {
   /**
    * Bearer token. The key prefix is the single source of truth for the
@@ -203,6 +206,25 @@ export interface MyazaKYCConfig<C extends SupportedCountry = SupportedCountry> {
   /** Show a light/dark mode toggle button inside the modal header. Default `true`. */
   showThemeToggle?: boolean;
 
+  /**
+   * How progress through the flow is drawn in the header.
+   *
+   *   • `'steps'` (default) — numbered circles, one per step, connected. Shows
+   *     WHICH step you are on and how many there are, and collapses to a window
+   *     when they no longer fit.
+   *   • `'bar'` — a single thin bar pinned to the bottom edge of the header.
+   *     Quieter, and unaffected by step count, so it suits long flows and hosts
+   *     who would rather the chrome said less.
+   *   • `'none'` — no progress in the header at all. For hosts whose own
+   *     surface already communicates progress, or short flows where a
+   *     step count is more noise than reassurance. The header keeps its
+   *     brand row and controls; only the progress element is dropped.
+   *
+   * `'steps'` and `'bar'` convey the same fraction; the choice is how much room
+   * it takes. `'none'` opts out of conveying it here.
+   */
+  progressStyle?: ProgressStyle;
+
   /**
    * Hide the close (X) button and block all user-initiated dismissal of the
    * sheet — the X button, Android hardware back, and the iOS swipe-down drag.

package/src/types/workflow.ts

@@ -82,6 +82,16 @@ export interface PhoneVerificationConfig {
 export interface QuestionnaireFieldOption {
   value: string;
   label: string;
+  /**
+   * Marks a choice that is not an answer on its own — an "Other". Selecting it
+   * reveals a required free-text input, stored as the `<key>_other` companion
+   * answer (the same shape as a money field's `<key>_currency`).
+   */
+  requiresDetail?: boolean;
+  /** Label for the detail input (default "Please specify"). */
+  detailLabel?: string;
+  /** Placeholder for the detail input (default `Tell us more about "<label>"`). */
+  detailPlaceholder?: string;
 }
 
 export interface QuestionnaireField {