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

package/src/screens/BusinessSearch.tsx

@@ -0,0 +1,199 @@
+import React, { useEffect, useState } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { MyazaAlert } from '../components/MyazaAlert';
+import { MyazaButton } from '../components/MyazaButton';
+import { MyazaInput } from '../components/MyazaInput';
+import { MyazaSelect } from '../components/MyazaSelect';
+import { MyazaText } from '../components/Typography';
+import { Icon } from '../components/Icon';
+import { BusinessSearchResults } from './BusinessSearchResults';
+import { useKyc, useKycStore, useTheme } from '../components/runtime';
+import { spacing } from '../config/theme';
+import type { BusinessSearchHit } from '../services/api';
+
+// ─── Finding the company by name, because that is what people know ───────────
+//
+// A registration number is on a certificate in a drawer; the name is in the
+// applicant's head. Asking for the number first turns the very first field
+// into a search of their own filing cabinet, which is where KYB applications
+// are abandoned.
+//
+// The search itself is FREE and read-only; only picking a result leads to the
+// paid register check. It fires on an explicit submit, never on keystroke: a
+// debounce spends the register's small, uncontracted rate-limit budget on
+// every prefix nobody asked for. Sizes and rhythm mirror the web SDK's
+// BusinessSearch (12px block gaps, 48px input/button) — keep them in lockstep.
+
+type SearchState =
+  | { phase: 'idle' }
+  | { phase: 'searching' }
+  | { phase: 'results'; hits: BusinessSearchHit[]; truncated: boolean }
+  | { phase: 'unavailable' };
+
+export function BusinessSearch({
+  country,
+  onPicked,
+  onManualEntry,
+}: {
+  country: string;
+  onPicked: (hit: BusinessSearchHit) => void;
+  onManualEntry: () => void;
+}): React.ReactElement {
+  const store = useKycStore();
+  const { colors } = useTheme();
+  const region = useKyc((s) => s.business.subdivisionCode);
+  const [query, setQuery] = useState('');
+  // Narrows what came back; it never replaces the search. Matches the name AND
+  // the number — a box inviting either that answered only one looked broken.
+  const [filter, setFilter] = useState('');
+  const [state, setState] = useState<SearchState>({ phase: 'idle' });
+  // Four countries file companies per state or emirate, and the provider
+  // searches ONE register at a time. Without the region it fails closed —
+  // a company filed a state away would otherwise come back "not registered".
+  const [regions, setRegions] = useState<{ code: string; name: string }[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setRegions([]);
+    if (!country) return undefined;
+    store
+      .getState()
+      .api.businessRegions(country)
+      .then((r) => {
+        if (!cancelled) setRegions(r.regions ?? []);
+      })
+      // An empty list means "do not ask" — also the safe answer when the
+      // catalogue is unreachable: the search itself says so on its own.
+      .catch(() => undefined);
+    return () => {
+      cancelled = true;
+    };
+  }, [country, store]);
+
+  const run = async (): Promise<void> => {
+    const q = query.trim();
+    if (q.length < 2) return;
+    if (regions.length > 0 && !region) return;
+    setState({ phase: 'searching' });
+    try {
+      const res = await store.getState().api.businessSearch({
+        country,
+        query: q,
+        limit: 50,
+        ...(region ? { subdivisionCode: region } : {}),
+      });
+      const hits = res.results ?? [];
+      setFilter('');
+      setState({ phase: 'results', hits, truncated: hits.length >= 50 });
+    } catch {
+      // Deliberately NOT an empty result list. "No matches" reads as "this
+      // business is not registered", a claim an outage has not earned.
+      setState({ phase: 'unavailable' });
+    }
+  };
+
+  const searching = state.phase === 'searching';
+  const shown =
+    state.phase === 'results'
+      ? state.hits.filter((h) => {
+          const q = filter.trim().toLowerCase();
+          if (!q) return true;
+          return (
+            h.name.toLowerCase().includes(q) || h.registrationNumber.toLowerCase().includes(q)
+          );
+        })
+      : [];
+
+  return (
+    <View>
+      {regions.length > 0 && (
+        <View style={{ marginBottom: 12 }}>
+          <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
+            State or region of registration
+          </MyazaText>
+          <MyazaSelect
+            value={region || undefined}
+            sheetTitle="State or region"
+            searchable
+            options={regions.map((r) => ({ value: r.code, label: r.name }))}
+            onChange={(code) => store.getState().setBusinessField('subdivisionCode', code)}
+          />
+        </View>
+      )}
+
+      {/* No label: the placeholder says it, and the magnifier says what kind
+          of field this is — the web SDK's exact arrangement. */}
+      <MyazaInput
+        value={query}
+        onChangeText={setQuery}
+        placeholder="Search by company name"
+        autoCorrect={false}
+        prefix={<Icon name="search" size={16} color={colors.textMuted} />}
+      />
+      <View style={{ height: 12 }} />
+      {/* The spinner lives IN the button, as on web — a separate spinner row
+          pushed the results down and said the same thing twice. */}
+      <MyazaButton
+        label={searching ? 'Searching…' : 'Search'}
+        leadingIcon={searching ? undefined : 'search'}
+        loading={searching}
+        onPress={() => void run()}
+        disabled={searching || query.trim().length < 2 || (regions.length > 0 && !region)}
+      />
+
+      {state.phase === 'results' && state.hits.length > 0 && (
+        <BusinessSearchResults
+          country={country}
+          hits={state.hits}
+          shown={shown}
+          truncated={state.truncated}
+          filter={filter}
+          onFilter={setFilter}
+          onPicked={onPicked}
+        />
+      )}
+
+      {state.phase === 'results' && state.hits.length === 0 && (
+        <MyazaText variant="bodyMedium" color={colors.textSecondary} style={{ marginTop: 12 }}>
+          Nothing found under that name. Try a shorter version of it, or enter the details
+          yourself.
+        </MyazaText>
+      )}
+
+      {state.phase === 'unavailable' && (
+        <View style={{ marginTop: 12 }}>
+          <MyazaAlert
+            variant="warning"
+            title="Search is unavailable"
+            message="We could not reach the company register just now. Try again, or enter the details yourself and we will check them when you submit."
+          />
+        </View>
+      )}
+
+      {/* Always offered, not only on failure: some companies are not in the
+          index at all, and a dead end at the first step ends the application. */}
+      <Pressable
+        accessibilityRole="button"
+        onPress={onManualEntry}
+        hitSlop={8}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 6,
+          alignSelf: 'flex-start',
+          marginTop: 12,
+        }}
+      >
+        <Icon name="pencil" size={14} color={colors.textSecondary} />
+        <MyazaText
+          variant="bodyMedium"
+          color={colors.textSecondary}
+          style={{ fontWeight: '500' }}
+        >
+          Enter the details myself
+        </MyazaText>
+      </Pressable>
+    </View>
+  );
+}

package/src/screens/BusinessSearchResults.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+
+import { CountryFlag } from '../components/CountryFlag';
+import { Icon } from '../components/Icon';
+import { MyazaInput } from '../components/MyazaInput';
+import { MyazaText } from '../components/Typography';
+import { useTheme } from '../components/runtime';
+import { radius } from '../config/theme';
+import type { BusinessSearchHit } from '../services/api';
+
+// The result list: count first ("40 results" says whether to narrow before you
+// start reading), a filter that narrows without re-searching, and one row per
+// candidate. Split from BusinessSearch (200-line rule). Every dimension here —
+// 40px filter, 12px row padding, 6px row gaps, 256px list — is the web SDK's,
+// so the two render the same screen.
+
+export function BusinessSearchResults({
+  country,
+  hits,
+  shown,
+  truncated,
+  filter,
+  onFilter,
+  onPicked,
+}: {
+  country: string;
+  hits: BusinessSearchHit[];
+  shown: BusinessSearchHit[];
+  truncated: boolean;
+  filter: string;
+  onFilter: (value: string) => void;
+  onPicked: (hit: BusinessSearchHit) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <>
+      {/* Count first: "40 results" says whether to narrow before you start
+          reading, which a bare list does not. */}
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 12,
+          marginTop: 12,
+        }}
+      >
+        <MyazaText variant="bodyMedium" color={colors.textSecondary}>
+          {shown.length === hits.length
+            ? `${hits.length} results`
+            : `${shown.length} of ${hits.length} results`}
+        </MyazaText>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <MyazaText variant="bodyMedium" color={colors.textSecondary}>
+            Filter
+          </MyazaText>
+          <View style={{ width: 176 }}>
+            <MyazaInput
+              value={filter}
+              onChangeText={onFilter}
+              placeholder="Name or number"
+              autoCorrect={false}
+              height={40}
+              fontSize={14}
+              prefix={<Icon name="filter" size={14} color={colors.textMuted} />}
+            />
+          </View>
+        </View>
+      </View>
+      <ScrollView style={{ maxHeight: 256, marginTop: 12 }} nestedScrollEnabled>
+        {shown.map((hit) => (
+          <Pressable
+            key={`${hit.registrationNumber}-${hit.name}`}
+            accessibilityRole="button"
+            onPress={() => onPicked(hit)}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 12,
+              borderWidth: 1,
+              borderColor: colors.border,
+              borderRadius: radius.sm,
+              padding: 12,
+              marginBottom: 6,
+            }}
+          >
+            <Icon name="building-2" size={16} color={colors.textSecondary} />
+            <View style={{ flex: 1, minWidth: 0 }}>
+              <MyazaText variant="label" color={colors.textDark} numberOfLines={1}>
+                {hit.name}
+              </MyazaText>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 2 }}>
+                <CountryFlag country={country} size={14} />
+                <MyazaText variant="bodySmall" color={colors.textSecondary}>
+                  {hit.registrationNumber}
+                </MyazaText>
+              </View>
+            </View>
+          </Pressable>
+        ))}
+      </ScrollView>
+      {shown.length === 0 && (
+        <MyazaText variant="bodyMedium" color={colors.textSecondary} style={{ marginTop: 12 }}>
+          Nothing here matches "{filter.trim()}". Clear the filter to see all {hits.length}.
+        </MyazaText>
+      )}
+      {truncated && (
+        <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: 6 }}>
+          Showing the first {hits.length}. Add more of the name to narrow it down.
+        </MyazaText>
+      )}
+    </>
+  );
+}

package/src/screens/CompanyInfoFields.tsx

@@ -5,79 +5,119 @@ import { spacing } from '../config/theme';
 import { useTheme } from '../components/runtime';
 import { MyazaText } from '../components/Typography';
 import { MyazaInput } from '../components/MyazaInput';
+import { MyazaDateField } from '../components/MyazaDateField';
+import { PhoneNumberInput } from '../components/PhoneNumberInput';
+import { isValidContactEmail } from '../config/contact';
+import { isValidWebsite } from '../config/website';
 import type { CompanyInfoField, CompanyInfoMode } from '../types/business';
+import type { BusinessState } from '../store/state';
 
 // ---------------------------------------------------------------------------
 // The company profile a KYB workflow asks for.
 //
 // Split from BusinessDetailsStep (200-line rule). Each field's mode comes from
 // the workflow and must match the server's resolution exactly — a field marked
-// optional here but required there produces a 422 the user cannot act on.
-// Section header, captions and placeholders mirror the web SDK's
-// BusinessCompanyInfoFields 1:1.
+// optional here but required there produces a 422 the user cannot act on. The
+// last five are registry facts the applicant STATES: asked as their own answer
+// rather than filled from the register, because where the two differ that is
+// the finding. Field list, labels, placeholders and controls mirror the web
+// SDK's BusinessCompanyInfoFields 1:1.
 // ---------------------------------------------------------------------------
 
-export const COMPANY_FIELD_LABELS: Record<CompanyInfoField, string> = {
-  address: 'Registered address',
-  email: 'Business email',
-  phone: 'Business phone',
-  website: 'Website',
-};
-
-const COMPANY_FIELD_PLACEHOLDERS: Record<CompanyInfoField, string> = {
-  address: 'e.g. 12 Marina Road, Lagos',
-  email: 'hello@company.com',
-  phone: '+234 800 000 0000',
-  website: 'company.com',
-};
+const FIELD_DEFS: Array<{
+  key: CompanyInfoField;
+  label: string;
+  placeholder: string;
+  kind?: 'phone' | 'date' | 'email' | 'website';
+}> = [
+  { key: 'address', label: 'Registered address', placeholder: 'e.g. 12 Marina Road, Lagos' },
+  { key: 'email', label: 'Business email', placeholder: 'hello@company.com', kind: 'email' },
+  { key: 'phone', label: 'Business phone', placeholder: '+234 800 000 0000', kind: 'phone' },
+  { key: 'website', label: 'Website', placeholder: 'company.com', kind: 'website' },
+  { key: 'dateOfIncorporation', label: 'Date of incorporation', placeholder: 'YYYY-MM-DD', kind: 'date' },
+  { key: 'taxId', label: 'Tax ID', placeholder: 'e.g. 01234567-0001' },
+  { key: 'vatNumber', label: 'VAT number', placeholder: 'e.g. NG123456789' },
+  { key: 'companyType', label: 'Company type', placeholder: 'e.g. Private Limited Company' },
+  { key: 'natureOfBusiness', label: 'Nature of business', placeholder: 'What the company does' },
+];
 
 export function CompanyInfoFields({
-  fields,
-  modes,
   values,
-  missing,
-  showErrors,
+  modes,
+  country,
+  geoCountry,
   onChange,
 }: {
-  fields: CompanyInfoField[];
+  values: BusinessState;
   modes: Record<CompanyInfoField, CompanyInfoMode>;
-  values: Record<CompanyInfoField, string>;
-  missing: CompanyInfoField[];
-  showErrors: boolean;
+  /** 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();
-  if (fields.length === 0) return null;
+  const visible = FIELD_DEFS.filter((f) => modes[f.key] !== 'off');
+  if (visible.length === 0) return null;
 
   return (
-    <>
-      <View style={{ height: spacing.md }} />
-      <MyazaText variant="bodyMedium" style={{ fontWeight: '600' }}>
-        Company information
-      </MyazaText>
+    <View>
+      <MyazaText variant="label">Company information</MyazaText>
       <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: 2 }}>
         We verify these details against the official registry record.
       </MyazaText>
-      {fields.map((field) => (
-        <View key={field}>
-          <View style={{ height: spacing.sm }} />
-          <MyazaInput
-            label={`${COMPANY_FIELD_LABELS[field]}${modes[field] === 'required' ? ' *' : ' (optional)'}`}
-            value={values[field]}
-            onChangeText={(text) => onChange(field, text)}
-            placeholder={COMPANY_FIELD_PLACEHOLDERS[field]}
-            keyboardType={
-              field === 'email' ? 'email-address' : field === 'phone' ? 'phone-pad' : 'default'
-            }
-            autoCapitalize="none"
-            error={
-              showErrors && missing.includes(field)
-                ? `${COMPANY_FIELD_LABELS[field]} is required.`
-                : null
-            }
-          />
-        </View>
-      ))}
-    </>
+      {visible.map((f) => {
+        const required = modes[f.key] === 'required';
+        const value = values[f.key];
+        const error =
+          f.kind === 'email' && value !== '' && !isValidContactEmail(value)
+            ? 'Enter a valid email address.'
+            : f.kind === 'website' && value !== '' && !isValidWebsite(value)
+              ? 'Enter a valid website, for example company.com'
+              : null;
+        return (
+          <View key={f.key} style={{ marginTop: spacing.md }}>
+            {f.kind === 'phone' || f.kind === 'date' ? (
+              <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
+                {f.label}
+                {required ? ' *' : ' (optional)'}
+              </MyazaText>
+            ) : null}
+            {f.kind === 'phone' ? (
+              // The same control the phone-verification step uses: dial-code
+              // picker, as-you-type national formatting, E.164 out. A business
+              // number is a phone number, and a bare text box gets back a dozen
+              // different shapes of the same digits. `value` carries the
+              // register's number when the lookup returned one.
+              <PhoneNumberInput
+                value={value}
+                defaultCountry={country || geoCountry || undefined}
+                geoCountry={geoCountry}
+                onChange={({ e164 }) => onChange('phone', e164)}
+              />
+            ) : f.kind === 'date' ? (
+              // A date gets the picker, not a text box — same control the
+              // questionnaire uses; emits strict YYYY-MM-DD.
+              <MyazaDateField
+                value={value || undefined}
+                placeholder={f.placeholder}
+                onChange={(iso) => onChange(f.key, iso)}
+              />
+            ) : (
+              <MyazaInput
+                label={`${f.label}${required ? ' *' : ' (optional)'}`}
+                value={value}
+                onChangeText={(text) => onChange(f.key, text)}
+                placeholder={f.placeholder}
+                keyboardType={f.kind === 'email' ? 'email-address' : 'default'}
+                autoCapitalize={f.kind === 'email' || f.kind === 'website' ? 'none' : 'words'}
+                error={error}
+              />
+            )}
+          </View>
+        );
+      })}
+    </View>
   );
 }

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';
@@ -9,6 +9,7 @@ import { MyazaText } from '../components/Typography';
 import { MyazaButton } from '../components/MyazaButton';
 import { Icon } from '../components/Icon';
 import { buildConsentModel } from './consent/model';
+import { resubmitNote } from '../lib/resubmit';
 
 // Consent / welcome screen — 1:1 with the web SDK's ConsentStep and the
 // Flutter SDK's ConsentScreen: shield hero, token-filled greeting, a "DURING
@@ -27,10 +28,40 @@ export function ConsentStep(): React.ReactElement {
   const { isBusiness, title, description, steps, capturesFace, recordsVideo } =
     buildConsentModel(config);
 
+  // A reviewer sent this applicant back. Say so, and say why — the note is the
+  // only thing on screen that explains a flow which has silently lost most of
+  // its steps. Above the hero so it is read before the instructions.
+  const redoNote = resubmitNote(config.resubmit);
+
   return (
     <View>
       <View style={{ height: spacing.sm }} />
 
+      {redoNote ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            gap: spacing.sm,
+            borderRadius: radius.lg,
+            borderWidth: 1,
+            borderColor: `${colors.warning}66`,
+            backgroundColor: colors.warningBg,
+            padding: spacing.md,
+            marginBottom: spacing.lg,
+          }}
+        >
+          <Icon name="refresh" size={16} color={colors.warning} />
+          <View style={{ flex: 1, gap: 2 }}>
+            <MyazaText variant="bodyMedium" color={colors.warning}>
+              A few things to redo
+            </MyazaText>
+            <MyazaText variant="bodySmall" color={colors.textSecondary}>
+              {redoNote}
+            </MyazaText>
+          </View>
+        </View>
+      ) : null}
+
       {/* Shield hero — concentric tinted rings + primary badge */}
       <View style={{ alignItems: 'center' }}>
         <View style={{ width: 80, height: 80, alignItems: 'center', justifyContent: 'center' }}>
@@ -50,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>
@@ -122,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
@@ -131,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,7 +55,9 @@ export function ContactDestinationField({
       </MyazaText>
       <PhoneNumberInput
         defaultCountry={defaultCountry}
+        geoCountry={geoCountry}
         disabled={disabled}
+        autoFocus
         onChange={onPhoneChange}
       />
       {error ? <ErrorLine text={error} /> : null}