@myazahq/kyc-sdk-react-native 2.0.1 → 2.0.2

package/README.md

@@ -209,7 +209,7 @@ base URL) from the API key prefix, the single source of truth:
 
 | Prefix     | Environment | Base URL                          |
 | ---------- | ----------- | --------------------------------- |
-| `pk_test_` | sandbox     | `https://sandbox.identity.myaza.app` |
+| `pk_test_` | sandbox     | `https://identity.myaza.app`      |
 | `pk_live_` | production  | `https://identity.myaza.app`      |
 
 An unrecognized or malformed key throws at setup (it never silently defaults).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myazahq/kyc-sdk-react-native",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Myaza KYC SDK for React Native (Expo) — ID verification, liveness detection, and document capture",
   "repository": {
     "type": "git",

package/src/__tests__/resolveUrl.test.ts

@@ -19,8 +19,8 @@ describe('detectEnvironment', () => {
 
 describe('resolveBaseUrl', () => {
   it('uses the hardcoded sandbox/production URLs and ignores devUrl', () => {
-    expect(resolveBaseUrl('pk_test_abc')).toBe('https://sandbox.identity.myaza.app');
-    expect(resolveBaseUrl('pk_test_abc', 'http://example.test')).toBe('https://sandbox.identity.myaza.app');
+    expect(resolveBaseUrl('pk_test_abc')).toBe('https://identity.myaza.app');
+    expect(resolveBaseUrl('pk_test_abc', 'http://example.test')).toBe('https://identity.myaza.app');
     expect(resolveBaseUrl('pk_live_abc')).toBe('https://identity.myaza.app');
   });
 
@@ -53,7 +53,7 @@ describe('normalizeDevAssetUrl', () => {
       'https://cdn.myaza.app/logo.png',
     );
     // https base (sandbox/prod) → never rewrites, even a localhost asset.
-    expect(normalizeDevAssetUrl('http://localhost:3001/logo.png', 'https://sandbox.identity.myaza.app')).toBe(
+    expect(normalizeDevAssetUrl('http://localhost:3001/logo.png', 'https://identity.myaza.app')).toBe(
       'http://localhost:3001/logo.png',
     );
   });

package/src/components/CameraPermissionView.tsx

@@ -21,11 +21,14 @@ interface ScaffoldProps {
   message: string;
   /** When true (default), vertically centers; false flows top-down below a heading. */
   centered?: boolean;
+  /** Accent color for the icon + its circle (defaults to the error tint). */
+  tint?: string;
   children: React.ReactNode; // action buttons
 }
 
-function CameraErrorScaffold({ icon, title, message, centered = true, children }: ScaffoldProps): React.ReactElement {
+function CameraErrorScaffold({ icon, title, message, centered = true, tint, children }: ScaffoldProps): React.ReactElement {
   const { colors } = useTheme();
+  const accent = tint ?? colors.error;
   return (
     <View
       style={
@@ -39,12 +42,12 @@ function CameraErrorScaffold({ icon, title, message, centered = true, children }
           width: 80,
           height: 80,
           borderRadius: radius.full,
-          backgroundColor: `${colors.error}1A`,
+          backgroundColor: `${accent}1A`,
           alignItems: 'center',
           justifyContent: 'center',
         }}
       >
-        <Icon name={icon} size={38} color={colors.error} />
+        <Icon name={icon} size={38} color={accent} />
       </View>
       <View style={{ height: spacing.lg }} />
       <MyazaText variant="heading2" style={{ textAlign: 'center' }}>
@@ -96,6 +99,39 @@ export function CameraPermissionView({ message, onRetry, onUpload, centered = tr
   );
 }
 
+// ── Permission primer (before the OS prompt) ─────────────────────────────────
+
+const DEFAULT_PRIMING_MESSAGE =
+  'When prompted, allow camera access to continue your verification.';
+
+export interface CameraPermissionPrimingViewProps {
+  message?: string;
+  /** Fires when the user taps "Grant access" — triggers the real OS prompt. */
+  onGrant: () => void;
+  centered?: boolean;
+}
+
+/**
+ * "Allow camera access" priming screen, shown right before the native OS camera
+ * permission prompt (mirrors Stripe Identity). The actual `requestPermission()`
+ * only fires once the user taps "Grant access". Distinct from
+ * `CameraPermissionView`, which is shown *after* a denial.
+ */
+export function CameraPermissionPrimingView({ message, onGrant, centered = true }: CameraPermissionPrimingViewProps): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <CameraErrorScaffold
+      icon="camera"
+      title="Allow camera access"
+      message={message ?? DEFAULT_PRIMING_MESSAGE}
+      centered={centered}
+      tint={colors.primary}
+    >
+      <MyazaButton label="Grant access" onPress={onGrant} />
+    </CameraErrorScaffold>
+  );
+}
+
 // ── Camera unavailable (no device / init failure) ────────────────────────────
 
 const DEFAULT_UNAVAILABLE_MESSAGE =

package/src/config/idTypes.ts

@@ -8,6 +8,8 @@ import type { IdTypesByCountry } from '../types/config';
 export const ID_TYPES: IdTypesByCountry = {
   NG: [
     { key: 'bvn',             label: 'BVN',                            digits: 11,                    requiresDocumentCapture: false },
+    { key: 'bvn-premium',     label: 'BVN Premium',                    digits: 11,                    requiresDocumentCapture: false },
+    { key: 'tax-id',          label: 'Tax ID', inputLabel: 'NIN',      digits: 11,                    requiresDocumentCapture: false },
     { key: 'nin',             label: 'NIN',                            digits: 11,                    requiresDocumentCapture: false },
     { key: 'vnin',            label: 'Virtual NIN (vNIN)',             digits: 16,                    requiresDocumentCapture: false },
     { key: 'passport',        label: 'International Passport',          pattern: /^[A-Z]\d{8}$/,       requiresDocumentCapture: true, scanSides: 'front_only'     },

package/src/screens/DocumentCaptureStep.tsx

@@ -17,7 +17,7 @@ import { MyazaButton } from '../components/MyazaButton';
 import { useToast } from '../components/toast';
 import { MyazaPulseLoader } from '../components/MyazaPulseLoader';
 import { CameraViewfinder } from '../components/CameraViewfinder';
-import { CameraPermissionView, CameraUnavailableView } from '../components/CameraPermissionView';
+import { CameraPermissionView, CameraUnavailableView, CameraPermissionPrimingView } from '../components/CameraPermissionView';
 import { DocumentCropper } from '../components/DocumentCropper';
 import { Icon } from '../components/Icon';
 
@@ -100,9 +100,13 @@ export function DocumentCaptureStep(): React.ReactElement {
   // `perm` is derived from the ASYNC requestPermission result, not synchronously
   // from `hasPermission` — otherwise the brief window while the OS prompt is open
   // (hasPermission still false) would read as "denied" and fire onError early.
+  // 'priming' shows the "Allow camera access" screen BEFORE the OS prompt
+  // (Stripe-style); the prompt only fires (→ 'requesting') once the user taps
+  // "Grant access".
   const { hasPermission, requestPermission } = useCameraPermission();
-  const [perm, setPerm] = useState<'checking' | 'granted' | 'denied'>(hasPermission ? 'granted' : 'checking');
-  const askedRef = useRef(false);
+  const [perm, setPerm] = useState<'priming' | 'requesting' | 'granted' | 'denied'>(
+    hasPermission ? 'granted' : 'priming',
+  );
   const permReportedRef = useRef(false);
 
   // ── Camera availability ─────────────────────────────────────────────────────
@@ -123,19 +127,25 @@ export function DocumentCaptureStep(): React.ReactElement {
   // No camera hardware at all → "Camera not available" (regardless of what the
   // permission API says — on a camera-less sim it may even report denied).
   const cameraUnavailable = cameraGrace && !device;
+  const showPrimer = perm === 'priming' && !!device;
 
+  // Reflect an externally-granted permission.
   useEffect(() => {
-    if (hasPermission) {
-      setPerm('granted');
-      return;
-    }
-    if (askedRef.current) return;
-    askedRef.current = true;
+    if (hasPermission) setPerm('granted');
+  }, [hasPermission]);
+
+  // Fire the real OS prompt only after the user taps "Grant access" (or retry).
+  useEffect(() => {
+    if (perm !== 'requesting') return;
+    let cancelled = false;
     void (async () => {
       const granted = await requestPermission();
-      setPerm(granted ? 'granted' : 'denied');
+      if (!cancelled) setPerm(granted ? 'granted' : 'denied');
     })();
-  }, [hasPermission, requestPermission]);
+    return () => {
+      cancelled = true;
+    };
+  }, [perm, requestPermission]);
 
   // A *genuine* permission denial requires a camera to exist but be blocked. On a
   // camera-less sim the OS may report denied — that's "not available", not a
@@ -156,8 +166,7 @@ export function DocumentCaptureStep(): React.ReactElement {
   }, [permissionDenied, config.onError]);
 
   const retryPermission = useCallback(() => {
-    askedRef.current = false;
-    setPerm('checking');
+    setPerm('requesting');
   }, []);
 
   // ── Capture → compress → store for the current side ────────────────────────
@@ -303,6 +312,18 @@ export function DocumentCaptureStep(): React.ReactElement {
         </>
       );
     }
+    if (showPrimer) {
+      // Primer before the OS prompt — camera not started yet.
+      return (
+        <>
+          {cropper}
+          <CameraPermissionPrimingView
+            message="When prompted, allow camera access to photograph your document."
+            onGrant={() => setPerm('requesting')}
+          />
+        </>
+      );
+    }
     if (permissionDenied) {
       // A real camera exists but the OS blocked access.
       return (

package/src/screens/IdInputStep.tsx

@@ -14,10 +14,12 @@ import { MyazaButton } from '../components/MyazaButton';
 // IdInputScreen. Client-side format validation only; no OCR pre-fill. The step
 // title/description live in the header.
 
-function hintFor(def: { label: string; digits?: number } | null): string {
+function hintFor(def: { label: string; inputLabel?: string; digits?: number } | null): string {
   if (!def) return 'Enter your ID number';
-  if (def.digits != null) return `Enter ${def.digits}-digit ${def.label}`;
-  return `Enter your ${def.label}`;
+  // e.g. Tax ID is looked up by the person's NIN — ask for what they type.
+  const label = def.inputLabel ?? def.label;
+  if (def.digits != null) return `Enter ${def.digits}-digit ${label}`;
+  return `Enter your ${label}`;
 }
 
 export function IdInputStep(): React.ReactElement {
@@ -59,7 +61,7 @@ export function IdInputStep(): React.ReactElement {
     <View>
       {def ? (
         <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
-          {def.label}
+          {def.inputLabel ?? def.label}
         </MyazaText>
       ) : null}
       <MyazaInput

package/src/screens/LivenessStep.tsx

@@ -29,7 +29,7 @@ import {
 } from '../config/captureSettings';
 import { Icon } from '../components/Icon';
 import { useToast } from '../components/toast';
-import { CameraPermissionView, CameraUnavailableView } from '../components/CameraPermissionView';
+import { CameraPermissionView, CameraUnavailableView, CameraPermissionPrimingView } from '../components/CameraPermissionView';
 import { LivenessAvatar } from './LivenessAvatar';
 import { detectFaceOnFrame } from '../liveness/visionCameraFaceDetector';
 import {
@@ -85,10 +85,14 @@ export function LivenessStep(): React.ReactElement {
   });
   const videoRecorder = useVideoRecorder(videoOutput, !!device);
 
-  const [perm, setPerm] = useState<'checking' | 'granted' | 'denied'>(
-    hasPermission ? 'granted' : 'checking',
+  // 'priming' shows the "Allow camera access" screen BEFORE the OS prompt
+  // (Stripe-style); the prompt only fires (→ 'requesting') once the user taps
+  // "Grant access". `perm` is driven by the async requestPermission result, not
+  // synchronously from `hasPermission` — otherwise the window while the OS prompt
+  // is open (hasPermission still false) would read as "denied" and fire onError.
+  const [perm, setPerm] = useState<'priming' | 'requesting' | 'granted' | 'denied'>(
+    hasPermission ? 'granted' : 'priming',
   );
-  const askedRef = useRef(false);
   const permReportedRef = useRef(false);
 
   // Camera-availability grace (a simulator has no front camera).
@@ -98,20 +102,26 @@ export function LivenessStep(): React.ReactElement {
     return () => clearTimeout(t);
   }, []);
   const cameraUnavailable = cameraGrace && !device;
+  const showPrimer = perm === 'priming' && !!device;
   const permissionDenied = perm === 'denied' && !!device;
 
+  // Reflect an externally-granted permission.
   useEffect(() => {
-    if (hasPermission) {
-      setPerm('granted');
-      return;
-    }
-    if (askedRef.current) return;
-    askedRef.current = true;
+    if (hasPermission) setPerm('granted');
+  }, [hasPermission]);
+
+  // Fire the real OS prompt only after the user taps "Grant access" (or retry).
+  useEffect(() => {
+    if (perm !== 'requesting') return;
+    let cancelled = false;
     void (async () => {
       const granted = await requestPermission();
-      setPerm(granted ? 'granted' : 'denied');
+      if (!cancelled) setPerm(granted ? 'granted' : 'denied');
     })();
-  }, [hasPermission, requestPermission]);
+    return () => {
+      cancelled = true;
+    };
+  }, [perm, requestPermission]);
 
   useEffect(() => {
     if (permissionDenied && !permReportedRef.current) {
@@ -270,15 +280,11 @@ export function LivenessStep(): React.ReactElement {
   if (cameraUnavailable) {
     return <CameraUnavailableView />;
   }
+  if (showPrimer) {
+    return <CameraPermissionPrimingView onGrant={() => setPerm('requesting')} />;
+  }
   if (permissionDenied) {
-    return (
-      <CameraPermissionView
-        onRetry={() => {
-          askedRef.current = false;
-          setPerm('checking');
-        }}
-      />
-    );
+    return <CameraPermissionView onRetry={() => setPerm('requesting')} />;
   }
 
   // ── Review (selfie captured) ─────────────────────────────────────────────────

package/src/services/deviceMetadata.ts

@@ -14,7 +14,7 @@ export type DeviceType = 'mobile' | 'tablet' | 'desktop' | 'unknown';
  * Single source of truth for the SDK version — also used by `services/api.ts`
  * for the `X-SDK-Version` header. Keep in sync with `package.json`.
  */
-export const SDK_VERSION = '2.0.1';
+export const SDK_VERSION = '2.0.2';
 
 export interface ReactNativeDeviceMetadata {
   sdkType: 'react-native';

package/src/services/resolveUrl.ts

@@ -19,7 +19,8 @@ export type SdkEnvironment = 'development' | 'sandbox' | 'production';
 
 /** Canonical base URLs for the non-development environments. */
 const BASE_URLS: Record<Exclude<SdkEnvironment, 'development'>, string> = {
-  sandbox: 'https://sandbox.identity.myaza.app',
+  // Sandbox and production share the same host; the key prefix selects the env.
+  sandbox: 'https://identity.myaza.app',
   production: 'https://identity.myaza.app',
 };
 

package/src/services/validators.ts

@@ -34,6 +34,9 @@ function matchesPattern(value: string, pattern: RegExp, label: string, hint: str
 const validators: Record<string, (value: string) => ValidationResult> = {
   // Nigeria
   bvn: (v) => digitsExact(v, 11, 'BVN'),
+  'bvn-premium': (v) => digitsExact(v, 11, 'BVN'),
+  // Tax ID lookups are keyed off the person's NIN — the typed number is a NIN.
+  'tax-id': (v) => digitsExact(v, 11, 'NIN'),
   nin: (v) => digitsExact(v, 11, 'NIN'),
   vnin: (v) => {
     if (v.length !== 16) {

package/src/types/config.ts

@@ -6,7 +6,7 @@ import type { KYCSubmission, KYCError } from './verification';
 
 export type SupportedCountry = 'NG' | 'GH' | 'KE' | 'ZA' | 'CI';
 
-export type NigeriaIdType = 'bvn' | 'nin' | 'vnin' | 'passport' | 'drivers-license' | 'pvc';
+export type NigeriaIdType = 'bvn' | 'bvn-premium' | 'nin' | 'vnin' | 'tax-id' | 'passport' | 'drivers-license' | 'pvc';
 export type GhanaIdType = 'ghana-card' | 'voters' | 'drivers-license' | 'ssnit' | 'passport';
 export type KenyaIdType = 'national-id' | 'passport';
 export type SouthAfricaIdType = 'national-id';
@@ -31,6 +31,11 @@ export type IdTypeForCountry<C extends SupportedCountry> =
 export interface IdTypeDefinition {
   key: IdType;
   label: string;
+  /**
+   * What the user actually types when it differs from the ID's name — e.g.
+   * Tax ID lookups are keyed off the person's NIN, so the input asks for a NIN.
+   */
+  inputLabel?: string;
   digits?: number;
   pattern?: RegExp;
   /** Whether this ID type requires photographing/uploading a physical document. */