@myazahq/kyc-sdk-react-native 2.3.0 → 2.5.0

package/src/liveness/useModelReady.ts

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { isFaceModelReady, primeFaceModel } from './visionCameraFaceDetector';
+
+// ─── Face-model readiness gate ────────────────────────────────────────────────
+//
+// Android fetches ML Kit's face model through Play Services rather than bundling
+// it, which keeps ~8 MB per device out of the APK but leaves a window where
+// detection cannot run: first launch before the download lands, or a device with
+// no Google Play Services at all.
+//
+// This has to be answered BEFORE the camera opens. `detectFace` reports through
+// `FaceResult`, where a missing model and an empty frame are both
+// `faceCount: 0` — so gating on the per-frame result would strand the user on
+// "position your face" indefinitely, with the SDK unable to say why. That is the
+// single failure mode this whole gate exists to prevent.
+//
+// iOS is always ready (Apple Vision is a system framework), so this resolves on
+// the first tick there and costs nothing.
+
+export type ModelReadyState = 'ready' | 'preparing' | 'unavailable';
+
+/** How long to wait for the model before calling it unavailable. */
+const MODEL_WAIT_MS = 20_000;
+/** Gap between readiness polls while the download is in flight. */
+const POLL_INTERVAL_MS = 500;
+
+/**
+ * Tracks whether on-device face detection can run.
+ *
+ * Returns `'preparing'` while Play Services fetches the model, `'ready'` once it
+ * can run, and `'unavailable'` when it could not be obtained within
+ * {@link MODEL_WAIT_MS} — no Play Services, no network, or a declined install.
+ *
+ * The flow primes the download at open (see `MyazaKYC.tsx`), so by the time the
+ * user reaches liveness this is normally already `'ready'` and no waiting screen
+ * is ever shown.
+ */
+export function useFaceModelReady(): ModelReadyState {
+  const [state, setState] = useState<ModelReadyState>(() =>
+    isFaceModelReady() ? 'ready' : 'preparing',
+  );
+  const startedAt = useRef(Date.now());
+
+  useEffect(() => {
+    if (state !== 'preparing') return;
+
+    // Re-prime rather than assume the open-time call ran: the step can be
+    // reached directly in a resumed flow, and prepareModel() is a no-op once
+    // the model is present.
+    primeFaceModel();
+
+    const id = setInterval(() => {
+      if (isFaceModelReady()) {
+        setState('ready');
+      } else if (Date.now() - startedAt.current > MODEL_WAIT_MS) {
+        setState('unavailable');
+      }
+    }, POLL_INTERVAL_MS);
+
+    return () => clearInterval(id);
+  }, [state]);
+
+  return state;
+}

package/src/liveness/visionCameraFaceDetector.ts

@@ -45,6 +45,41 @@ const boxedDetector: BoxedHybridObject<MyazaFaceDetector> | null = detector
   ? NitroModules.box(detector)
   : null;
 
+/**
+ * Start fetching the face model, so it is warm by the time liveness runs.
+ *
+ * Android fetches ML Kit's models through Play Services rather than bundling
+ * them, which keeps ~18.5 MB per device out of the APK but leaves a window on
+ * first launch where detection cannot work. Priming at flow start puts that
+ * download behind the consent and ID-type screens instead of in front of the
+ * camera.
+ *
+ * Best-effort and non-blocking, exactly like the web SDK's `primeFaceMesh()`:
+ * a failure here is not fatal, because {@link isFaceModelReady} is what the
+ * liveness step actually gates on. iOS resolves immediately (Apple Vision is a
+ * system framework).
+ */
+export function primeFaceModel(): void {
+  detector?.prepareModel().catch(() => {
+    /* best-effort: isFaceModelReady() is the real gate */
+  });
+}
+
+/**
+ * Whether face detection can run right now.
+ *
+ * Checked BEFORE the camera opens. `detectFace` cannot answer this — a missing
+ * model and an empty frame are both `faceCount: 0`, so gating on the per-frame
+ * result would strand the user on "position your face" with no explanation.
+ *
+ * `true` when the native module is absent entirely (Expo Go), because that path
+ * already degrades to the existing camera-unavailable screen and should not be
+ * reported as a model problem.
+ */
+export function isFaceModelReady(): boolean {
+  return detector?.isModelReady() ?? true;
+}
+
 /**
  * Maps the native {@link FaceResult} to a {@link LivenessFaceData}, or `null`
  * when no face is present (`faceCount === 0`). A worklet — runs on the camera

package/src/screens/ApplicantRoleStep.tsx

@@ -50,11 +50,13 @@ export function ApplicantRoleStep(): React.ReactElement {
   const { colors } = useTheme();
   const stored = useKyc((s) => s.businessApplication);
 
-  // The valid entered people, keeping their ORIGINAL index — the payload flag
-  // is index-based, so the list and the submission can never disagree.
+  // The valid entered PEOPLE, keeping their ORIGINAL index — the payload flag
+  // is index-based, so the list and the submission can never disagree. A
+  // corporate shareholder is excluded: "which of these is you?" is a question
+  // about humans, and a company can never be the person filling in the form.
   const people = stored.keyPeople
     .map((row, index) => ({ row, index }))
-    .filter(({ row }) => isKeyPersonRowValid(row));
+    .filter(({ row }) => !row.isCorporate && isKeyPersonRowValid(row));
   const hasPeople = people.length > 0;
 
   const propName = [config.userData?.firstName, config.userData?.lastName]
@@ -63,13 +65,15 @@ export function ApplicantRoleStep(): React.ReactElement {
 
   // Tri-state: a person's index, 'other', or nothing chosen yet. First arrival
   // pre-selects the applicant's own entry when the userData name matches
-  // (they still confirm) — a stored choice always wins.
+  // (they still confirm) — and when the name matches NOBODY listed, "I'm not
+  // one of these people" is what that fact means, so it is pre-selected
+  // instead (mirrors the web SDK). A stored choice always wins.
   const [selection, setSelection] = useState<number | 'other' | null>(() => {
     if (stored.applicantKeyPersonIndex !== null) return stored.applicantKeyPersonIndex;
     if (stored.applicantRole) return 'other';
     if (propName) {
       const match = people.find(({ row }) => namesLooselyMatch(propName, row.name));
-      if (match) return match.index;
+      return match ? match.index : people.length > 0 ? 'other' : null;
     }
     return null;
   });

package/src/screens/BusinessCheckPanel.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaAlert } from '../components/MyazaAlert';
+import type { BusinessCheckState } from '../store/state';
+
+// ---------------------------------------------------------------------------
+// What the register said, when it was NOT a plain yes.
+//
+// The check is a paid, deliberate step, so it is shown rather than run
+// invisibly: the applicant sees a company that is not on the register caught
+// HERE instead of after documents and a selfie. Nothing is shown for a company
+// that WAS found — the register's answer is already in the form the applicant
+// is looking at, editable, and its officers are the next step. Mirrors the web
+// SDK's BusinessCheckPanel.
+// ---------------------------------------------------------------------------
+
+export function BusinessCheckPanel({
+  check,
+}: {
+  check: BusinessCheckState;
+}): React.ReactElement | null {
+  // `skipped` shows nothing on purpose. The organisation could not be charged,
+  // which is not the applicant's problem and not something they can act on;
+  // the check simply happens at submission instead. `checking` shows nothing
+  // either — the loader lives inside the Continue button they just pressed.
+  if (
+    check.status === 'idle' ||
+    check.status === 'skipped' ||
+    check.status === 'found' ||
+    check.status === 'checking'
+  ) {
+    return null;
+  }
+
+  if (check.status === 'not_found') {
+    return (
+      <MyazaAlert
+        variant="warning"
+        title="We could not find this business on the register"
+        message="Check the registration number and try again."
+      />
+    );
+  }
+
+  if (check.status === 'limit_reached') {
+    // Not a failure: the submission still runs its own check. What it says is
+    // "stop re-picking and look at the number", which is the only thing left
+    // that helps.
+    return (
+      <NeutralPanel
+        title="We have stopped looking this up for now"
+        body="This application has searched the register several times. Check the registration number is right; your details will still be verified when you submit."
+      />
+    );
+  }
+
+  // unavailable — deliberately not "we could not find it": an outage is not
+  // evidence that a business is unregistered.
+  return (
+    <NeutralPanel
+      title="The register is temporarily unavailable"
+      body="You can continue, and we will check it shortly."
+    />
+  );
+}
+
+function NeutralPanel({ title, body }: { title: string; body: string }): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View
+      style={{
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: radius.sm,
+        backgroundColor: colors.backgroundSecondary,
+        padding: spacing.md,
+      }}
+    >
+      <MyazaText variant="label">{title}</MyazaText>
+      <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: 2 }}>
+        {body}
+      </MyazaText>
+    </View>
+  );
+}

package/src/screens/BusinessDetailsFields.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { MyazaInput } from '../components/MyazaInput';
+import { spacing } from '../config/theme';
+import { CompanyInfoFields } from './CompanyInfoFields';
+import { isValidContactEmail } from '../config/contact';
+import type { BusinessState } from '../store/state';
+import type { BusinessProductDef } from '../config/business';
+import type { RegistrationHint } from '../config/registrationHint';
+import type { CompanyInfoField, CompanyInfoMode } from '../types/business';
+
+// ---------------------------------------------------------------------------
+// The DETAILS screen of the business step: confirming what the register said.
+//
+// Registration number and name are editable here too — this is also where
+// manual entry lands, for the companies no search index carries. Split from
+// BusinessDetailsStep (200-line rule); field order mirrors the web SDK.
+// ---------------------------------------------------------------------------
+
+export function BusinessDetailsFields({
+  business,
+  productDef,
+  regHint,
+  numberValid,
+  formatOk,
+  requireName,
+  country,
+  modes,
+  showCompanyInfo,
+  showContactEmail,
+  onChange,
+}: {
+  business: BusinessState;
+  productDef: BusinessProductDef;
+  regHint: RegistrationHint;
+  numberValid: boolean;
+  formatOk: boolean;
+  requireName: boolean;
+  country: string;
+  modes: Record<CompanyInfoField, CompanyInfoMode>;
+  showCompanyInfo: boolean;
+  showContactEmail: boolean;
+  onChange: <K extends keyof BusinessState>(key: K, value: BusinessState[K]) => void;
+}): React.ReactElement {
+  const regNumber = business.registrationNumber;
+  const contactEmail = business.contactEmail;
+  const contactEmailInvalid =
+    contactEmail.trim() !== '' && !isValidContactEmail(contactEmail.trim());
+  return (
+    <View>
+      <MyazaInput
+        label={productDef.inputLabel}
+        value={regNumber}
+        onChangeText={(text) => onChange('registrationNumber', text)}
+        placeholder={regHint.placeholder}
+        autoCapitalize="characters"
+        autoCorrect={false}
+        // Live like the web SDK: a wrong CAC prefix is corrected on the spot,
+        // not discovered on Continue. The registry tip fills the same slot
+        // until there is an error to show.
+        error={
+          regNumber !== '' && !numberValid
+            ? (!formatOk && regHint.formatError) ||
+              `Enter a valid ${productDef.inputLabel.toLowerCase()}.`
+            : null
+        }
+        helper={regHint.tip ?? undefined}
+      />
+
+      <View style={{ height: spacing.md }} />
+      <MyazaInput
+        label={`Registered business name${requireName ? '' : ' (optional)'}`}
+        value={business.registrationName}
+        onChangeText={(text) => onChange('registrationName', text)}
+        placeholder="Enter the registered business name"
+        autoCorrect={false}
+      />
+
+      {showCompanyInfo ? (
+        <>
+          <View style={{ height: spacing.md }} />
+          <CompanyInfoFields
+            values={business}
+            modes={modes}
+            country={country}
+            onChange={(field, value) => onChange(field, value)}
+          />
+        </>
+      ) : null}
+
+      {showContactEmail ? (
+        <>
+          <View style={{ height: spacing.md }} />
+          <MyazaInput
+            label="Contact email for owner verification (optional)"
+            value={contactEmail}
+            onChangeText={(text) => onChange('contactEmail', text)}
+            placeholder="admin@company.com"
+            keyboardType="email-address"
+            autoCapitalize="none"
+            helper="We'll email this address a link for your directors and owners to verify their identity."
+            error={contactEmailInvalid ? 'Enter a valid email address.' : null}
+          />
+        </>
+      ) : null}
+    </View>
+  );
+}