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

package/src/screens/AddressCountryControl.tsx

@@ -0,0 +1,115 @@
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { CountryField } from '../components/CountryField';
+import { CountryFlag } from '../components/CountryFlag';
+import { ALL_REGION_CODES, regionCountryName } from '../config/regions';
+import { configScope } from '../lib/scope';
+import { inferredCountry } from '../lib/inferred-country';
+import type { SupportedCountry } from '../types/config';
+
+// ---------------------------------------------------------------------------
+// The declared-country control for ADDRESS-SCOPED flows — mounted on the
+// Proof of Address step (the Didit PoA model: the applicant names their
+// market, then uploads the document). Mirrors the web SDK's
+// steps/address/AddressCountryControl: the pick drives the document kinds on
+// offer, the search filter, the map's opening view, the PoA vendor market,
+// and rides the submission as the verification's country. The pin stays the
+// ground truth regardless.
+//
+// The picker is the house country sheet (CountryField) in its region-grouped
+// mode, with the inferred country (server geo first, device locale second)
+// pinned on top as "Your location" — the web's region menu, in the sheet the
+// rest of the mobile flow uses (user decision 2026-09-06).
+// ---------------------------------------------------------------------------
+
+/** What the picker offers: the org's accepted list, else every country. */
+export function poaOfferedCountries(configured: string[] | undefined): string[] {
+  const list = (configured ?? [])
+    .map((c) => c.toUpperCase())
+    .filter((c) => ALL_REGION_CODES.includes(c));
+  return list.length > 0 ? list : ALL_REGION_CODES;
+}
+
+export function AddressCountryControl(): React.ReactElement | null {
+  const config = useKycConfig();
+  const store = useKycStore();
+  const { colors } = useTheme();
+  const selected = useKyc((s) => s.selectedCountry);
+  const geo = useKyc((s) => s.serverConfig.geoCountry);
+
+  const scoped = configScope(config) === 'address';
+  const offered = useMemo(
+    () => poaOfferedCountries(config.proofOfAddress?.countries),
+    [config.proofOfAddress?.countries],
+  );
+  const options = useMemo(
+    () => offered.map((code) => ({ code, name: regionCountryName(code) })),
+    [offered],
+  );
+
+  if (!scoped) return null;
+
+  // Only a country the applicant PICKED shows as selected: the address scope
+  // has no seeded country to show (web's AddressCountryControl, same rule), and
+  // showing config.country here while the attachment area's flag read
+  // `selectedCountry` had the control and the drop zone disagreeing.
+  const value = selected ?? null;
+  const pick = (code: string) => store.getState().setCountry(code as SupportedCountry);
+
+  // One accepted country = nothing to pick. Show it as a settled fact rather
+  // than a sheet that could only ever re-answer itself.
+  if (offered.length === 1) {
+    const only = offered[0]!;
+    // The label sits ABOVE the field, as it does on every other input (user
+    // decision 2026-09-05) — the read-only box is CountryField's trigger
+    // without the chevron, so the settled and pickable states line up.
+    return (
+      <View style={{ marginBottom: spacing.lg }}>
+        <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.xs }}>
+          Country
+        </MyazaText>
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: spacing.md,
+            paddingVertical: spacing.md,
+            borderRadius: radius.sm,
+            borderWidth: 1,
+            borderColor: colors.border,
+            backgroundColor: colors.backgroundSecondary,
+          }}
+        >
+          <CountryFlag country={only} size={20} />
+          <View style={{ width: spacing.sm }} />
+          <MyazaText variant="body" style={{ flex: 1 }} numberOfLines={1}>
+            {regionCountryName(only)}
+          </MyazaText>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ marginBottom: spacing.lg }}>
+      <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.xs }}>
+        Country
+      </MyazaText>
+      <CountryField
+        value={value}
+        options={options}
+        onChange={pick}
+        // The inferred country pinned on top of the sheet; the sheet itself
+        // drops it when the org's list does not carry it.
+        geoCountry={inferredCountry(geo)}
+        grouped
+        placeholder="Select country"
+        searchPlaceholder="Search countries"
+      />
+    </View>
+  );
+}

package/src/screens/BusinessDetailsFields.tsx

@@ -26,6 +26,7 @@ export function BusinessDetailsFields({
   formatOk,
   requireName,
   country,
+  geoCountry,
   modes,
   showCompanyInfo,
   showContactEmail,
@@ -38,6 +39,7 @@ export function BusinessDetailsFields({
   formatOk: boolean;
   requireName: boolean;
   country: string;
+  geoCountry?: string | null;
   modes: Record<CompanyInfoField, CompanyInfoMode>;
   showCompanyInfo: boolean;
   showContactEmail: boolean;
@@ -84,6 +86,7 @@ export function BusinessDetailsFields({
             values={business}
             modes={modes}
             country={country}
+            geoCountry={geoCountry}
             onChange={(field, value) => onChange(field, value)}
           />
         </>

package/src/screens/BusinessDetailsStep.tsx

@@ -45,6 +45,7 @@ export function BusinessDetailsStep(): React.ReactElement {
   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]);
@@ -171,6 +172,7 @@ export function BusinessDetailsStep(): React.ReactElement {
           formatOk={formatOk}
           requireName={nameRequired}
           country={country}
+          geoCountry={geoCountry}
           modes={modes}
           showCompanyInfo={showCompanyInfo}
           showContactEmail={showContactEmail}

package/src/screens/BusinessDocumentSlot.tsx

@@ -2,6 +2,7 @@ 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';
@@ -11,7 +12,7 @@ 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
@@ -158,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,7 +24,8 @@ 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 = {
@@ -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;

package/src/screens/CompanyInfoFields.tsx

@@ -45,12 +45,16 @@ export function CompanyInfoFields({
   values,
   modes,
   country,
+  geoCountry,
   onChange,
 }: {
   values: BusinessState;
   modes: Record<CompanyInfoField, CompanyInfoMode>;
   /** Seeds the phone dial code: the company's country of registration. */
   country?: string;
+  /** The visitor's IP country: the dial-code seed of last resort, and the
+   *  row pinned to the top of the picker. */
+  geoCountry?: string | null;
   onChange: (field: CompanyInfoField, value: string) => void;
 }): React.ReactElement | null {
   const { colors } = useTheme();
@@ -88,7 +92,8 @@ export function CompanyInfoFields({
               // register's number when the lookup returned one.
               <PhoneNumberInput
                 value={value}
-                defaultCountry={country}
+                defaultCountry={country || geoCountry || undefined}
+                geoCountry={geoCountry}
                 onChange={({ e164 }) => onChange('phone', e164)}
               />
             ) : f.kind === 'date' ? (

package/src/screens/ConsentStep.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Linking, Pressable, View } from 'react-native';
-import Svg, { Circle, Defs, LinearGradient, Stop } from 'react-native-svg';
+import Svg, { Circle } from 'react-native-svg';
 
 import { radius, spacing } from '../config/theme';
 import { PRIVACY_URL, TERMS_URL } from '../config/brand';
@@ -81,21 +81,10 @@ export function ConsentStep(): React.ReactElement {
               elevation: 6,
             }}
           >
-            {/* Top-left → bottom-right gradient badge, matching Flutter. A flat
-                fill was the last visual difference on this screen. The second
-                stop is the SAME primary at 70% opacity rather than a
-                pre-blended colour: composited over the sheet it produces
-                Flutter's `alphaBlend(primary@0.7, background)` exactly, and it
-                keeps working when the consumer overrides primaryColor or the
-                theme flips, which a hardcoded blend would not. */}
+            {/* Solid primary badge — no gradients in the flow (house rule
+                2026-08-29, applied across all three SDKs in lockstep). */}
             <Svg width={56} height={56} style={{ position: 'absolute' }}>
-              <Defs>
-                <LinearGradient id="myazaShieldHero" x1="0" y1="0" x2="1" y2="1">
-                  <Stop offset="0" stopColor={colors.primary} stopOpacity={1} />
-                  <Stop offset="1" stopColor={colors.primary} stopOpacity={0.7} />
-                </LinearGradient>
-              </Defs>
-              <Circle cx={28} cy={28} r={28} fill="url(#myazaShieldHero)" />
+              <Circle cx={28} cy={28} r={28} fill={colors.primary} />
             </Svg>
             <Icon name="shield" size={28} color={colors.onPrimary} />
           </View>
@@ -153,7 +142,7 @@ export function ConsentStep(): React.ReactElement {
         <MyazaText
           variant="bodySmall"
           color={colors.textDark}
-          style={{ fontWeight: '600', textDecorationLine: 'underline' }}
+          style={{ fontWeight: '500', textDecorationLine: 'underline' }}
           onPress={() => void Linking.openURL(TERMS_URL).catch(() => undefined)}
         >
           End User Terms
@@ -162,7 +151,7 @@ export function ConsentStep(): React.ReactElement {
         <MyazaText
           variant="bodySmall"
           color={colors.textDark}
-          style={{ fontWeight: '600', textDecorationLine: 'underline' }}
+          style={{ fontWeight: '500', textDecorationLine: 'underline' }}
           onPress={() => void Linking.openURL(PRIVACY_URL).catch(() => undefined)}
         >
           Privacy Policy

package/src/screens/ContactActions.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { MyazaButton } from '../components/MyazaButton';
+import { ContactFooterNote } from './ContactFooterNote';
+
+// ---------------------------------------------------------------------------
+// The contact step's footer: the one primary action (send, then verify), the
+// optional skip, and the reassurance note. Split from ContactVerificationStep
+// (200-line rule); the step owns every decision and this only renders them.
+// ---------------------------------------------------------------------------
+
+export function ContactActions({
+  hasChallenge,
+  busy,
+  disabled,
+  required,
+  isEmail,
+  onPrimary,
+  onSkip,
+}: {
+  /** A code is out: the button verifies instead of sending. */
+  hasChallenge: boolean;
+  busy: boolean;
+  disabled: boolean;
+  /** `required: false` adds the skip; the server enforces the rest. */
+  required: boolean;
+  isEmail: boolean;
+  onPrimary: () => void;
+  onSkip: () => void;
+}): React.ReactElement {
+  return (
+    <>
+      <View style={{ height: spacing.md }} />
+      <MyazaButton
+        label={hasChallenge ? 'Verify code' : 'Send code'}
+        loading={busy}
+        disabled={disabled}
+        onPress={onPrimary}
+      />
+
+      {!required ? (
+        <>
+          <View style={{ height: spacing.sm }} />
+          <MyazaButton label="Skip for now" variant="ghost" disabled={busy} onPress={onSkip} />
+        </>
+      ) : null}
+
+      <View style={{ height: spacing.md }} />
+      <ContactFooterNote isEmail={isEmail} />
+    </>
+  );
+}

package/src/screens/ContactDestinationField.tsx

@@ -18,6 +18,7 @@ export function ContactDestinationField({
   onEmailChange,
   onPhoneChange,
   defaultCountry,
+  geoCountry,
   error,
   disabled,
 }: {
@@ -26,6 +27,8 @@ export function ContactDestinationField({
   onEmailChange: (value: string) => void;
   onPhoneChange: (value: { e164: string; isValid: boolean }) => void;
   defaultCountry?: string;
+  /** The visitor's IP country, pinned to the top of the dial-code picker. */
+  geoCountry?: string | null;
   error: string | null;
   disabled?: boolean;
 }): React.ReactElement {
@@ -52,6 +55,7 @@ export function ContactDestinationField({
       </MyazaText>
       <PhoneNumberInput
         defaultCountry={defaultCountry}
+        geoCountry={geoCountry}
         disabled={disabled}
         autoFocus
         onChange={onPhoneChange}

package/src/screens/ContactEntryPanel.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { MyazaAlert } from '../components/MyazaAlert';
+import { ContactDestinationField } from './ContactDestinationField';
+import { ContactChannelChoice } from './ContactChannelChoice';
+import type { PhoneOtpChannel } from '../config/contact';
+
+// ---------------------------------------------------------------------------
+// The first half of the contact step: where to send the code, and (when the
+// workflow offers a choice) how. Composed as one widget so the step has a
+// single child per phase. Split from ContactVerificationStep (200-line rule);
+// mirrors Flutter's ContactEntryPanel.
+// ---------------------------------------------------------------------------
+
+export function ContactEntryPanel({
+  isEmail,
+  recovery,
+  email,
+  onEmailChange,
+  onPhoneChange,
+  defaultCountry,
+  geoCountry,
+  error,
+  disabled,
+  offeredChannels,
+  via,
+  onPickChannel,
+}: {
+  isEmail: boolean;
+  /** Entered via submit recovery: the server refused this channel's proof. */
+  recovery: boolean;
+  email: string;
+  onEmailChange: (value: string) => void;
+  onPhoneChange: (value: { e164: string; isValid: boolean }) => void;
+  defaultCountry?: string;
+  geoCountry?: string | null;
+  error: string | null;
+  disabled: boolean;
+  offeredChannels: PhoneOtpChannel[];
+  via: PhoneOtpChannel;
+  onPickChannel: (channel: PhoneOtpChannel) => void;
+}): React.ReactElement {
+  return (
+    <>
+      {recovery && (
+        <>
+          <MyazaAlert
+            variant="warning"
+            title="Please verify again"
+            message={`Your earlier confirmation has expired, so please verify ${isEmail ? 'your email' : 'your number'} once more. Everything else is saved, and we will submit again straight after.`}
+          />
+          <View style={{ height: spacing.md }} />
+        </>
+      )}
+      <ContactDestinationField
+        isEmail={isEmail}
+        email={email}
+        onEmailChange={onEmailChange}
+        onPhoneChange={onPhoneChange}
+        defaultCountry={defaultCountry}
+        geoCountry={geoCountry}
+        error={error}
+        disabled={disabled}
+      />
+      <ContactChannelChoice
+        offered={offeredChannels}
+        picked={via}
+        disabled={disabled}
+        onPick={onPickChannel}
+      />
+    </>
+  );
+}

package/src/screens/ContactVerificationStep.tsx

@@ -3,13 +3,10 @@ import { View } from 'react-native';
 
 import { spacing } from '../config/theme';
 import { useEffectiveCountry, useKyc, useKycConfig, useKycStore } from '../components/runtime';
-import { MyazaButton } from '../components/MyazaButton';
-import { MyazaAlert } from '../components/MyazaAlert';
-import { ContactDestinationField } from './ContactDestinationField';
+import { ContactActions } from './ContactActions';
+import { ContactEntryPanel } from './ContactEntryPanel';
 import { ContactVerifiedPanel } from './ContactVerifiedPanel';
 import { ContactCodeStep } from './ContactCodeStep';
-import { ContactChannelChoice } from './ContactChannelChoice';
-import { ContactFooterNote } from './ContactFooterNote';
 import {
   contactCodeLength,
   contactIsRequired,
@@ -57,10 +54,9 @@ export function ContactVerificationStep({
   const [destination, setDestination] = useState(contact.emailAddress ?? '');
   // The phone field emits E.164 + validity from libphonenumber, so the step no
   // longer guesses either from raw text.
-  const [phone, setPhone] = useState<{ e164: string; isValid: boolean }>({
-    e164: contact.phoneNumber ?? '',
-    isValid: false,
-  });
+  const [phone, setPhone] = useState<{ e164: string; isValid: boolean }>(
+    { e164: contact.phoneNumber ?? '', isValid: false },
+  );
   const [challengeId, setChallengeId] = useState<string | null>(null);
   const [expiresAt, setExpiresAt] = useState<string | null>(null);
   const [code, setCode] = useState('');
@@ -174,57 +170,31 @@ export function ContactVerificationStep({
           onResend={(switchTo) => void send(switchTo)}
         />
       ) : (
-        <>
-          {recovery && (
-            <>
-              <MyazaAlert
-                variant="warning"
-                title="Please verify again"
-                message={`Your earlier confirmation has expired, so please verify ${isEmail ? 'your email' : 'your number'} once more. Everything else is saved, and we will submit again straight after.`}
-              />
-              <View style={{ height: spacing.md }} />
-            </>
-          )}
-          <ContactDestinationField
-            isEmail={isEmail}
-            email={destination}
-            onEmailChange={setDestination}
-            onPhoneChange={setPhone}
-            defaultCountry={
-              config.phoneVerification?.defaultCountry ??
-              country ??
-              serverConfig.geoCountry ??
-              undefined
-            }
-            error={error}
-            disabled={busy}
-          />
-          <ContactChannelChoice
-            offered={offeredChannels}
-            picked={via}
-            disabled={busy}
-            onPick={setVia}
-          />
-        </>
+        <ContactEntryPanel
+          isEmail={isEmail}
+          recovery={recovery}
+          email={destination}
+          onEmailChange={setDestination}
+          onPhoneChange={setPhone}
+          defaultCountry={config.phoneVerification?.defaultCountry ?? country ?? serverConfig.geoCountry ?? undefined}
+          geoCountry={serverConfig.geoCountry}
+          error={error}
+          disabled={busy}
+          offeredChannels={offeredChannels}
+          via={via}
+          onPickChannel={setVia}
+        />
       )}
 
-      <View style={{ height: spacing.md }} />
-      <MyazaButton
-        label={challengeId ? 'Verify code' : 'Send code'}
-        loading={busy}
+      <ContactActions
+        hasChallenge={challengeId != null}
+        busy={busy}
         disabled={challengeId ? code.length !== codeLength : !canSend}
-        onPress={() => (challengeId ? void check(code) : void send())}
+        required={required}
+        isEmail={isEmail}
+        onPrimary={() => (challengeId ? void check(code) : void send())}
+        onSkip={advance}
       />
-
-      {!required ? (
-        <>
-          <View style={{ height: spacing.sm }} />
-          <MyazaButton label="Skip for now" variant="ghost" disabled={busy} onPress={advance} />
-        </>
-      ) : null}
-
-      <View style={{ height: spacing.md }} />
-      <ContactFooterNote isEmail={isEmail} />
     </View>
   );
 }