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

package/src/screens/BusinessDetailsStep.tsx

@@ -0,0 +1,212 @@
+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 { MyazaButton } from '../components/MyazaButton';
+import { MyazaInput } from '../components/MyazaInput';
+import { MyazaSelect } from '../components/MyazaSelect';
+import { CountryField } from '../components/CountryField';
+import { CompanyInfoFields } from './CompanyInfoFields';
+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';
+
+// ---------------------------------------------------------------------------
+// Business (KYB) registry details.
+//
+// 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.
+// ---------------------------------------------------------------------------
+
+export const businessDetailsMeta = {
+  title: 'Business Details',
+  description:
+    'Provide your business registration details for verification against the official registry.',
+};
+
+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 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.
+  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 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;
+  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;
+    // 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);
+    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}
+      />
+
+      <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}
+      />
+
+      <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)}
+      />
+
+      {needsContactEmail ? (
+        <>
+          <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}
+          />
+        </>
+      ) : 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>
+  );
+}

package/src/screens/BusinessDocumentSlot.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { ActivityIndicator, Image, Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { Icon } from '../components/Icon';
+
+// ---------------------------------------------------------------------------
+// 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
+// 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
+// back matters — it is the only way a user catches "wrong photo from the
+// camera roll" before submitting.
+// ---------------------------------------------------------------------------
+
+/** Web parity: UploadedFileThumb is h-12 w-12 rounded-lg (48 / radius 8). */
+const THUMB = 48;
+
+function UploadedThumb({ previewUri, isPdf }: { previewUri: string | null; isPdf: boolean }): React.ReactElement {
+  const { colors } = useTheme();
+  if (previewUri && !isPdf) {
+    return (
+      <Image
+        source={{ uri: previewUri }}
+        resizeMode="cover"
+        style={{
+          width: THUMB,
+          height: THUMB,
+          borderRadius: radius.xs,
+          borderWidth: 1,
+          borderColor: colors.border,
+        }}
+      />
+    );
+  }
+  if (isPdf) {
+    return (
+      <View
+        style={{
+          width: THUMB,
+          height: THUMB,
+          borderRadius: radius.xs,
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: colors.backgroundSecondary,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Icon name="file-text" size={20} color={colors.textMuted} />
+      </View>
+    );
+  }
+  // The preview didn't survive a remount — the check still says "uploaded".
+  return <Icon name="check" size={20} color={colors.success} />;
+}
+
+export function BusinessDocumentSlot({
+  label,
+  required,
+  fileName,
+  uploading,
+  previewUri = null,
+  isPdf = false,
+  onPick,
+  onRemove,
+}: {
+  label: string;
+  required: boolean;
+  /** Uploaded file name, when this slot already has a mediaId. */
+  fileName: string | null;
+  uploading: boolean;
+  /** Local URI of the picked image, for the thumbnail (null once remounted). */
+  previewUri?: string | null;
+  isPdf?: boolean;
+  /** Open the photo/file source sheet (also serves Replace). */
+  onPick: () => void;
+  onRemove: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+
+  if (fileName !== null && !uploading) {
+    return (
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius.sm,
+          backgroundColor: colors.backgroundSecondary,
+          padding: spacing.md,
+          marginBottom: spacing.sm + 4,
+        }}
+      >
+        <UploadedThumb previewUri={previewUri} isPdf={isPdf} />
+        <View style={{ width: spacing.sm + 4 }} />
+        <View style={{ flex: 1, minWidth: 0 }}>
+          <MyazaText variant="label" style={{ fontWeight: '600' }} numberOfLines={1}>
+            {fileName}
+          </MyazaText>
+          <MyazaText variant="bodySmall" color={colors.textMuted}>
+            {label}
+          </MyazaText>
+        </View>
+        <Pressable onPress={onPick} hitSlop={8} accessibilityRole="button">
+          <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '600' }}>
+            Replace
+          </MyazaText>
+        </Pressable>
+        <View style={{ width: spacing.sm + 4 }} />
+        <Pressable
+          onPress={onRemove}
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel={`Remove ${label}`}
+        >
+          <Icon name="close" size={16} color={colors.textMuted} />
+        </Pressable>
+      </View>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={uploading ? undefined : onPick}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: uploading }}
+      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,
+      }}
+    >
+      {uploading ? (
+        <ActivityIndicator size="small" color={colors.primary} />
+      ) : (
+        <Icon name="upload" size={20} color={colors.textMuted} />
+      )}
+      <View style={{ width: spacing.sm + 4 }} />
+      <View style={{ flex: 1, minWidth: 0 }}>
+        <MyazaText variant="label" style={{ fontWeight: '600' }} numberOfLines={1}>
+          {label}
+          {required ? (
+            <MyazaText variant="label" color={colors.error} style={{ fontWeight: '600' }}>
+              {' *'}
+            </MyazaText>
+          ) : null}
+        </MyazaText>
+        <MyazaText variant="bodySmall" color={colors.textMuted}>
+          {uploading ? 'Uploading…' : 'Photo or PDF, up to 20MB'}
+        </MyazaText>
+      </View>
+    </Pressable>
+  );
+}

package/src/screens/BusinessDocumentsStep.tsx

@@ -0,0 +1,213 @@
+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';
+import { MyazaText } from '../components/Typography';
+import { MyazaButton } from '../components/MyazaButton';
+import { MediaSourceSheet } from '../components/MediaSourceSheet';
+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';
+
+// ---------------------------------------------------------------------------
+// Supporting company documents (certificate of incorporation, MEMART, …).
+//
+// The registry says a business exists; these are what say the applicant holds
+// its paperwork. The server OCRs each one and cross-checks it against the
+// registry record — a soft result that never fails the verification, so the
+// only thing blocking here is a REQUIRED slot left empty, which the server
+// would 422 anyway.
+//
+// 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.
+// ---------------------------------------------------------------------------
+
+export const businessDocumentsMeta = {
+  title: 'Business documents',
+  description:
+    'Upload the supporting documents for your business. Required documents are marked with *.',
+};
+
+export function BusinessDocumentsStep(): React.ReactElement {
+  const config = useKycConfig();
+  const store = useKycStore();
+  const { colors } = useTheme();
+  const uploaded = useKyc((s) => s.businessApplication.documents);
+  const [busySlot, setBusySlot] = useState<string | null>(null);
+  const [pickingSlot, setPickingSlot] = useState<ResolvedBusinessDocumentType | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const slots = useMemo(
+    () => resolveBusinessDocumentTypes(config.business),
+    [config.business],
+  );
+  const missing = slots.filter((s) => s.required && !uploaded.some((d) => d.type === s.key));
+
+  const attach = useCallback(
+    async (slot: ResolvedBusinessDocumentType, uri: string, mimeType: string | undefined, name: string) => {
+      setBusySlot(slot.key);
+      setError(null);
+      try {
+        // A PDF is passed through untouched — re-encoding would destroy the
+        // text the server reads off it.
+        const isPdf = (mimeType ?? '').toLowerCase().startsWith('application/pdf');
+        const finalUri = isPdf ? uri : await compressDocumentImage(uri).catch(() => uri);
+        const mediaId = await withRetry(() =>
+          store.getState().api.upload({ uri: finalUri, type: mimeType, name }, 'business_document'),
+        );
+        // Preview details ride the RECORD so the thumbnail survives leaving
+        // the step — screen-local state dies with the component.
+        store.getState().setBusinessDocument({
+          type: slot.key,
+          mediaId,
+          fileName: name,
+          ...(isPdf ? { isPdf: true } : { previewUri: finalUri }),
+        });
+      } catch {
+        setError(`We could not upload ${slot.label.toLowerCase()}. Please try again.`);
+      } finally {
+        setBusySlot(null);
+      }
+    },
+    [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 handleContinue = (): void => {
+    if (missing.length > 0 || busySlot !== null) return;
+    store.getState().nextStep();
+  };
+
+  return (
+    <View>
+      {slots.map((slot) => {
+        const doc = uploaded.find((d) => d.type === slot.key);
+        return (
+          <BusinessDocumentSlot
+            key={slot.key}
+            label={slot.label}
+            required={slot.required}
+            fileName={doc?.fileName ?? null}
+            uploading={busySlot === slot.key}
+            previewUri={doc?.previewUri ?? null}
+            isPdf={doc?.isPdf === true}
+            onPick={() => setPickingSlot(slot)}
+            onRemove={() => store.getState().removeBusinessDocument(slot.key)}
+          />
+        );
+      })}
+
+      {error ? (
+        <MyazaText variant="bodySmall" color={colors.error} style={{ marginBottom: spacing.sm }}>
+          {error}
+        </MyazaText>
+      ) : null}
+
+      <View style={{ height: spacing.xs }} />
+      <MyazaButton
+        label="Continue"
+        onPress={handleContinue}
+        disabled={missing.length > 0 || busySlot !== null}
+      />
+
+      {/* THE SAME sheet as the Proof of Address step — identical title,
+          options, icons and captions, so uploading a document feels the same
+          everywhere in the flow. */}
+      <MediaSourceSheet
+        open={pickingSlot !== null}
+        title="Upload your document"
+        onClose={() => setPickingSlot(null)}
+        options={[
+          {
+            icon: 'image',
+            label: 'Photo library',
+            caption: 'Pick a photo you already have',
+            onPress: () => {
+              const slot = pickingSlot;
+              setPickingSlot(null);
+              if (slot) void choosePhoto(slot);
+            },
+          },
+          {
+            icon: 'camera',
+            label: 'Take a photo',
+            caption: 'Photograph the document now',
+            onPress: () => {
+              const slot = pickingSlot;
+              setPickingSlot(null);
+              if (slot) void takePhoto(slot);
+            },
+          },
+          {
+            icon: 'file-text',
+            label: 'Choose a file',
+            caption: 'A PDF or image from your files',
+            onPress: () => {
+              const slot = pickingSlot;
+              setPickingSlot(null);
+              if (slot) void chooseFile(slot);
+            },
+          },
+        ]}
+      />
+    </View>
+  );
+}