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

package/src/screens/BusinessDetailsFields.tsx

@@ -0,0 +1,112 @@
+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,
+  geoCountry,
+  modes,
+  showCompanyInfo,
+  showContactEmail,
+  onChange,
+}: {
+  business: BusinessState;
+  productDef: BusinessProductDef;
+  regHint: RegistrationHint;
+  numberValid: boolean;
+  formatOk: boolean;
+  requireName: boolean;
+  country: string;
+  geoCountry?: string | null;
+  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}
+            geoCountry={geoCountry}
+            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,161 @@ 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 geoCountry = useKyc((s) => s.serverConfig.geoCountry);
 
   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}
+          geoCountry={geoCountry}
+          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

@@ -2,15 +2,17 @@ import React from 'react';
 import { ActivityIndicator, Image, Pressable, View } from 'react-native';
 
 import { radius, spacing } from '../config/theme';
+import { UPLOAD_HINT } from '../config/uploadLimits';
 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
 // BusinessDocumentSlot 1:1: empty, it is a dashed full-width tap target
 // (upload glyph — a spinner while uploading — label with a red * when
-// required, "Photo or PDF, up to 20MB"); filled, a solid card showing a 48px
+// required, the shared upload hint); filled, a solid card showing a 48px
 // THUMBNAIL of what was actually picked (a muted file tile for PDFs, a check
 // when the preview didn't survive a remount — web's exact fallback ladder),
 // the file's name over the slot label, Replace, and remove. Showing the file
@@ -134,15 +136,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} />
       ) : (
@@ -159,7 +159,7 @@ export function BusinessDocumentSlot({
           ) : null}
         </MyazaText>
         <MyazaText variant="bodySmall" color={colors.textMuted}>
-          {uploading ? 'Uploading…' : 'Photo or PDF, up to 20MB'}
+          {uploading ? 'Uploading…' : UPLOAD_HINT}
         </MyazaText>
       </View>
     </Pressable>

package/src/screens/BusinessDocumentsStep.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { View } from 'react-native';
-import * as ImagePicker from 'expo-image-picker';
 
 import { spacing } from '../config/theme';
 import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
@@ -11,8 +10,7 @@ import { BusinessDocumentSlot } from './BusinessDocumentSlot';
 import { withRetry } from '../services/retry';
 import { compressDocumentImage } from '../services/mediaCompress';
 import { resolveBusinessDocumentTypes, type ResolvedBusinessDocumentType } from '../config/businessSteps';
-import { isAcceptedPoaMimeType, POA_ACCEPTED_MIME_TYPES } from '../config/proofOfAddress';
-import { loadDocumentPicker } from '../services/documentPicker';
+import { useBusinessDocumentAttach } from './useBusinessDocumentAttach';
 
 // ---------------------------------------------------------------------------
 // Supporting company documents (certificate of incorporation, MEMART, …).
@@ -26,13 +24,14 @@ import { loadDocumentPicker } from '../services/documentPicker';
 // Layout mirrors the web SDK 1:1: the header carries the description, each
 // document is a dashed upload slot (see BusinessDocumentSlot), and Continue is
 // disabled until every required slot is filled. Tapping a slot opens the
-// photo/file source sheet — the mobile stand-in for web's file input.
+// photo/file source sheet — the mobile stand-in for web's file input; the
+// pickers themselves live in useBusinessDocumentAttach.
 // ---------------------------------------------------------------------------
 
 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 {
@@ -79,57 +78,7 @@ export function BusinessDocumentsStep(): React.ReactElement {
     [store],
   );
 
-  const takePhoto = useCallback(
-    async (slot: ResolvedBusinessDocumentType) => {
-      const permission = await ImagePicker.requestCameraPermissionsAsync();
-      if (!permission.granted) {
-        setError('Camera access is needed to photograph the document.');
-        return;
-      }
-      const result = await ImagePicker.launchCameraAsync({ mediaTypes: ['images'], quality: 1 });
-      const asset = result.canceled ? undefined : result.assets[0];
-      if (asset) {
-        // A FRIENDLY name, not the picker's temp junk — camera/library assets
-        // carry generated names; the slot key says what the file IS.
-        await attach(slot, asset.uri, asset.mimeType ?? 'image/jpeg', `${slot.key}.jpg`);
-      }
-    },
-    [attach],
-  );
-
-  const choosePhoto = useCallback(
-    async (slot: ResolvedBusinessDocumentType) => {
-      const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ['images'], quality: 1 });
-      const asset = result.canceled ? undefined : result.assets[0];
-      if (asset) {
-        await attach(slot, asset.uri, asset.mimeType ?? 'image/jpeg', `${slot.key}.jpg`);
-      }
-    },
-    [attach],
-  );
-
-  const chooseFile = useCallback(
-    async (slot: ResolvedBusinessDocumentType) => {
-      const picker = loadDocumentPicker();
-      if (!picker) {
-        setError('Choosing a file is not available in this app. Please photograph the document.');
-        return;
-      }
-      const result = await picker.getDocumentAsync({
-        type: [...POA_ACCEPTED_MIME_TYPES],
-        copyToCacheDirectory: true,
-        multiple: false,
-      });
-      const asset = result.canceled ? undefined : result.assets?.[0];
-      if (!asset) return;
-      if (!isAcceptedPoaMimeType(asset.mimeType)) {
-        setError('Please choose a photo (JPEG, PNG or WebP) or a PDF.');
-        return;
-      }
-      await attach(slot, asset.uri, asset.mimeType, asset.name ?? slot.key);
-    },
-    [attach],
-  );
+  const { takePhoto, choosePhoto, chooseFile } = useBusinessDocumentAttach(attach, setError);
 
   const handleContinue = (): void => {
     if (missing.length > 0 || busySlot !== null) return;