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

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>
+  );
+}

package/src/screens/BusinessDetailsStep.tsx

@@ -2,34 +2,33 @@ import React, { useMemo, useState } from 'react';
 import { View } from 'react-native';
 
 import { spacing } from '../config/theme';
-import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
-import { MyazaText } from '../components/Typography';
+import { useKyc, useKycConfig, useKycStore } from '../components/runtime';
 import { MyazaButton } from '../components/MyazaButton';
-import { MyazaInput } from '../components/MyazaInput';
-import { MyazaSelect } from '../components/MyazaSelect';
-import { CountryField } from '../components/CountryField';
-import { CompanyInfoFields } from './CompanyInfoFields';
+import { BusinessRegistryPickers } from './BusinessRegistryPickers';
+import { BusinessSearch } from './BusinessSearch';
+import { BusinessPickedSection } from './BusinessPickedSection';
+import { BusinessDetailsFields } from './BusinessDetailsFields';
+import { BusinessCheckPanel } from './BusinessCheckPanel';
 import {
   businessCountriesFor,
-  businessCountryName,
   businessProductsForCountry,
   companyInfoFieldModes,
   getBusinessProductDef,
   keyPeopleNeedsContactEmail,
-  missingRequiredCompanyInfo,
 } from '../config/business';
 import { registrationNumberHint } from '../config/registrationHint';
-import { isValidContactEmail } from '../config/contact';
-import type { CompanyInfoField } from '../types/business';
+import { registerPrefillPatch } from '../config/businessPrefill';
+import { businessDetailsValid, checkPanelVisible } from '../config/businessDetailsValidity';
 
 // ---------------------------------------------------------------------------
-// Business (KYB) registry details.
+// Business (KYB) registry details — two screens in one step.
 //
-// The registry lookup verifies that a business EXISTS. Registration numbers are
-// public, so it proves nothing about who is filling this in — that is what the
-// rest of the KYB application (key people, documents, the applicant's own KYC)
-// is for. This step collects the number, the registry country and product, and
-// the company profile the workflow asks for.
+// 'pick' is choosing WHICH company. 'details' is confirming what the register
+// then said about it. They are separate because the register has not been
+// asked yet while you are still picking, so showing the detail fields there
+// would invite somebody to fill in answers we are about to overwrite.
+// Continue is what runs the paid check and moves between them. Mirrors the
+// web SDK's BusinessDetailsStep — keep the two in lockstep.
 // ---------------------------------------------------------------------------
 
 export const businessDetailsMeta = {
@@ -41,172 +40,159 @@ export const businessDetailsMeta = {
 export function BusinessDetailsStep(): React.ReactElement {
   const config = useKycConfig();
   const store = useKycStore();
-  const { colors } = useTheme();
   const business = useKyc((s) => s.business);
-  const [touched, setTouched] = useState(false);
+  const check = useKyc((s) => s.businessCheck);
+  const [phase, setPhase] = useState<'pick' | 'details'>('pick');
+  // Production never shows the test-result toggle, and never honours a pin.
+  const isSandbox = useKyc((s) => s.serverConfig.environment) !== 'PRODUCTION';
 
   const workflowBusiness = config.business;
   const countries = useMemo(() => businessCountriesFor(workflowBusiness), [workflowBusiness]);
-  // Precedence mirrors the web SDK exactly: the visitor's pick, then the
-  // workflow's PRIMARY country, then the list head. The primary is always in
-  // the offered list but not necessarily FIRST — preferring `countries[0]`
-  // defaulted the picker to the wrong registry whenever the primary sat later.
+  // Precedence mirrors the web SDK: the visitor's pick, then the workflow's
+  // PRIMARY country, then the list head.
   const country = business.country ?? workflowBusiness?.country ?? countries[0] ?? '';
   const products = useMemo(
     () => businessProductsForCountry(workflowBusiness, country),
     [workflowBusiness, country],
   );
-  // Re-derived per country rather than remembered: a product the picked country
-  // does not offer would be rejected at submit.
   const product = products.includes(business.product ?? '') ? business.product! : products[0]!;
   const productDef = getBusinessProductDef(product);
 
   const modes = companyInfoFieldModes(workflowBusiness);
-  const companyFields = (Object.keys(modes) as CompanyInfoField[]).filter(
-    (field) => modes[field] !== 'off',
-  );
-  const needsContactEmail = keyPeopleNeedsContactEmail(workflowBusiness);
+  const showCompanyInfo = Object.values(modes).some((m) => m !== 'off');
+  const showContactEmail = keyPeopleNeedsContactEmail(workflowBusiness);
 
   const set = <K extends keyof typeof business>(key: K, value: (typeof business)[K]): void =>
     store.getState().setBusinessField(key, value);
 
-  const missingCompanyInfo = missingRequiredCompanyInfo(workflowBusiness, {
-    address: business.address,
-    email: business.email,
-    phone: business.phone,
-    website: business.website,
-  });
-  const contactEmailInvalid =
-    needsContactEmail && business.contactEmail.trim() !== '' && !isValidContactEmail(business.contactEmail);
-  const nameMissing =
-    workflowBusiness?.requireRegistrationName === true && business.registrationName.trim() === '';
-
-  // Country-aware registration-number guidance (NG: CAC prefix rules + format
-  // validation; elsewhere: placeholder + registry tip). Mirrors the web SDK.
   const regHint = registrationNumberHint(country, productDef);
   const regNumber = business.registrationNumber;
+  // A company has been named, so the card replaces the search. The NUMBER is
+  // what names it (a prefilled session sends one without a name; the register
+  // supplies the name on Continue, so an unnamed card is momentary).
+  const picked = regNumber.trim() !== '';
+  const nameRequired = workflowBusiness?.requireRegistrationName === true;
   const formatOk =
     !regHint.isValidFormat || regNumber.trim() === '' || regHint.isValidFormat(regNumber);
   const numberValid = regNumber.trim().length >= 2 && formatOk;
-  const canContinue =
-    numberValid && !nameMissing && missingCompanyInfo.length === 0 && !contactEmailInvalid;
 
-  const handleContinue = (): void => {
-    setTouched(true);
-    if (!canContinue) return;
+  const isFormValid = businessDetailsValid({
+    phase,
+    business,
+    modes,
+    product,
+    numberValid,
+    nameRequired,
+    showContactEmail,
+  });
+
+  const checking = check.status === 'checking';
+
+  const handleContinue = async (): Promise<void> => {
+    if (!isFormValid || checking) return;
     // Persist the resolved country/product so the submission uses exactly what
-    // was on screen, not a re-derivation from a config that may have changed.
-    set('country', country);
-    set('product', product);
+    // was on screen. Only when different: these are identity keys, and writing
+    // an unchanged value would needlessly reset the check we just ran.
+    if (business.country !== country) set('country', country);
+    if (business.product !== product) set('product', product);
+
+    // The paid registry check — awaited, so the details screen opens already
+    // holding what the register said. Only a definitive "not on the register"
+    // stops the flow: everything else (a short balance, an outage) continues
+    // and is checked at submission, as it was before.
+    const { canContinue, company } = await store.getState().checkBusiness();
+    if (!canContinue) return;
+
+    // First Continue ends at the details screen rather than the next step: the
+    // register has only just answered, and this is where what it said gets put
+    // in front of them to confirm or correct.
+    if (phase === 'pick') {
+      const { patch, prefilled } = registerPrefillPatch(company, store.getState().business);
+      if (prefilled.length > 0) store.getState().applyBusinessPrefill(patch, prefilled);
+      setPhase('details');
+      return;
+    }
     store.getState().nextStep();
   };
 
   return (
     <View>
-      {countries.length > 1 ? (
-        <>
-          <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.xs }}>
-            Country of registration
-          </MyazaText>
-          {/* The SAME sheet as the phone field's dial-code picker — restricted
-              to the workflow's registry countries. */}
-          <CountryField
-            value={country}
-            options={countries.map((code) => ({ code, name: businessCountryName(code) }))}
-            onChange={(code) => {
-              set('country', code);
-              // The product list narrows per country, so a stale pick is
-              // cleared rather than carried into a refused submission.
-              set('product', null);
-            }}
-          />
-          <View style={{ height: spacing.md }} />
-        </>
-      ) : null}
-
-      {products.length > 1 ? (
-        <>
-          <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.xs }}>
-            Verification type
-          </MyazaText>
-          <MyazaSelect
-            value={product}
-            sheetTitle="Verification type"
-            options={products.map((key) => ({
-              value: key,
-              label: getBusinessProductDef(key).label,
-            }))}
-            onChange={(key) => set('product', key)}
-          />
-          <View style={{ height: spacing.md }} />
-        </>
-      ) : null}
-
-      <MyazaInput
-        label={productDef.inputLabel}
-        value={business.registrationNumber}
-        onChangeText={(text) => set('registrationNumber', text)}
-        placeholder={regHint.placeholder}
-        autoCapitalize="characters"
-        autoFocus
-        // 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}
+      <BusinessRegistryPickers
+        country={country}
+        countries={countries}
+        product={product}
+        products={products}
+        onCountry={(code) => {
+          set('country', code);
+          // The product list narrows per country, so a stale pick is cleared
+          // rather than carried into a refused submission.
+          set('product', null);
+        }}
+        onProduct={(key) => set('product', key)}
       />
 
-      <View style={{ height: spacing.sm }} />
-      <MyazaInput
-        label={`Registered business name${workflowBusiness?.requireRegistrationName ? '' : ' (optional)'}`}
-        value={business.registrationName}
-        onChangeText={(text) => set('registrationName', text)}
-        placeholder="Enter the registered business name"
-        error={touched && nameMissing ? 'Enter the registered business name.' : null}
-      />
+      {/* HIDDEN, not unmounted, once a company is chosen: unmounting threw
+          away the query and results, so "Change" dropped somebody back to an
+          empty box. Hiding keeps the picker alive, which makes Change cheap. */}
+      <View style={{ display: phase === 'pick' && country && !picked ? 'flex' : 'none' }}>
+        <BusinessSearch
+          country={country}
+          onPicked={(hit) => {
+            // Names the company and nothing more: the register is asked on
+            // Continue, and the fields it fills live on the screen after.
+            set('registrationNumber', hit.registrationNumber);
+            set('registrationName', hit.name);
+          }}
+          onManualEntry={() => setPhase('details')}
+        />
+      </View>
+
+      {phase === 'pick' && picked ? (
+        <BusinessPickedSection
+          country={country}
+          name={business.registrationName}
+          registrationNumber={regNumber}
+          isSandbox={isSandbox}
+          onChange={() => {
+            // Back to the search rather than an undo: they are changing WHICH
+            // company this is about, and the fields belong to the old one.
+            set('registrationNumber', '');
+            set('registrationName', '');
+          }}
+        />
+      ) : null}
 
-      <CompanyInfoFields
-        fields={companyFields}
-        modes={modes}
-        values={{
-          address: business.address,
-          email: business.email,
-          phone: business.phone,
-          website: business.website,
-        }}
-        missing={missingCompanyInfo}
-        showErrors={touched}
-        onChange={(field, text) => set(field, text)}
-      />
+      {phase === 'details' ? (
+        <BusinessDetailsFields
+          business={business}
+          productDef={productDef}
+          regHint={regHint}
+          numberValid={numberValid}
+          formatOk={formatOk}
+          requireName={nameRequired}
+          country={country}
+          modes={modes}
+          showCompanyInfo={showCompanyInfo}
+          showContactEmail={showContactEmail}
+          onChange={set}
+        />
+      ) : null}
 
-      {needsContactEmail ? (
+      {checkPanelVisible(check.status) ? (
         <>
-          <View style={{ height: spacing.sm }} />
-          <MyazaInput
-            label="Contact email for owner verification (optional)"
-            value={business.contactEmail}
-            onChangeText={(text) => set('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={touched && contactEmailInvalid ? 'Enter a valid email address.' : null}
-          />
+          <View style={{ height: spacing.lg }} />
+          <BusinessCheckPanel check={check} />
         </>
       ) : null}
 
-      <View style={{ height: spacing.md }} />
-      <MyazaButton label="Continue" onPress={handleContinue} disabled={touched && !canContinue} />
-      {touched && !canContinue ? (
-        <MyazaText variant="bodySmall" color={colors.error} style={{ marginTop: spacing.xs, textAlign: 'center' }}>
-          Please complete the highlighted fields.
-        </MyazaText>
-      ) : null}
+      <View style={{ height: spacing.lg }} />
+      <MyazaButton
+        label={checking ? 'Checking…' : phase === 'details' ? 'Confirm details & continue' : 'Continue'}
+        onPress={() => void handleContinue()}
+        loading={checking}
+        disabled={!isFormValid || checking}
+      />
     </View>
   );
 }
+

package/src/screens/BusinessDocumentSlot.tsx

@@ -5,6 +5,7 @@ import { radius, spacing } from '../config/theme';
 import { useTheme } from '../components/runtime';
 import { MyazaText } from '../components/Typography';
 import { Icon } from '../components/Icon';
+import { DashedBorder } from '../components/DashedBorder';
 
 // ---------------------------------------------------------------------------
 // One business-document upload slot — mirrors the web SDK's
@@ -134,15 +135,13 @@ export function BusinessDocumentSlot({
       style={{
         flexDirection: 'row',
         alignItems: 'center',
-        borderWidth: 2,
-        borderStyle: 'dashed',
-        borderColor: colors.border,
         borderRadius: radius.sm,
         padding: spacing.md,
         marginBottom: spacing.sm + 4,
         opacity: uploading ? 0.7 : 1,
       }}
     >
+      <DashedBorder color={colors.border} radius={radius.sm} />
       {uploading ? (
         <ActivityIndicator size="small" color={colors.primary} />
       ) : (

package/src/screens/BusinessDocumentsStep.tsx

@@ -32,7 +32,7 @@ import { loadDocumentPicker } from '../services/documentPicker';
 export const businessDocumentsMeta = {
   title: 'Business documents',
   description:
-    'Upload the supporting documents for your business. Required documents are marked with *.',
+    'Upload the supporting documents for your business. Each one must clearly show the registered business name and registration number. Required documents are marked with *.',
 };
 
 export function BusinessDocumentsStep(): React.ReactElement {