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

package/src/screens/address/AddressSandboxTabs.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, View } from 'react-native';
+
+import { MyazaText } from '../../components/Typography';
+import { Icon, type IconName } from '../../components/Icon';
+import { useKyc, useKycStore, useTheme } from '../../components/runtime';
+import { DashedBorder } from '../../components/DashedBorder';
+import { spacing } from '../../config/theme';
+
+// Dev/sandbox only: the address flow's Test-result tabs — the web SDK's
+// control, on the BusinessSandboxToggle's mechanics. Four equal columns share
+// one sliding indicator whose FILL takes the active outcome's semantic colour
+// (the dashboard's tier/verdict language), so moving from Attested to
+// Mismatch reads as one pill travelling and turning red. Tabs are icon-only
+// (four labels never fit a phone) and the caption names the active pick.
+// Nothing is SENT until the operator taps; unclicked keeps the server default,
+// which the resting position mirrors.
+
+type Outcome =
+  | 'address_attested'
+  | 'address_corroborated'
+  | 'address_collected'
+  | 'address_mismatch';
+
+// `tint` is the icon's own colour while the tab is INACTIVE, so the row reads
+// as four outcomes rather than one live state and three dead ones. The pairs
+// are web's `text-emerald-600 dark:text-emerald-400` and friends, hex for hex;
+// `null` takes the theme's muted tone, web's `text-muted-foreground`.
+const OPTIONS: Array<{
+  key: Outcome;
+  label: string;
+  icon: IconName;
+  pill: string;
+  tint: { light: string; dark: string } | null;
+}> = [
+  {
+    key: 'address_attested',
+    label: 'Attested',
+    icon: 'shield',
+    pill: '#059669',
+    tint: { light: '#059669', dark: '#34d399' },
+  },
+  {
+    key: 'address_corroborated',
+    label: 'Corroborated',
+    icon: 'badge-check',
+    pill: '#0284c7',
+    tint: { light: '#0284c7', dark: '#38bdf8' },
+  },
+  {
+    key: 'address_collected',
+    label: 'Collected',
+    icon: 'circle-dashed',
+    pill: '#475569',
+    tint: null,
+  },
+  {
+    key: 'address_mismatch',
+    label: 'Mismatch',
+    icon: 'circle-x',
+    pill: '#dc2626',
+    tint: { light: '#dc2626', dark: '#f87171' },
+  },
+];
+
+export function AddressSandboxTabs(): React.ReactElement | null {
+  const store = useKycStore();
+  const { colors, mode } = useTheme();
+  const environment = useKyc((s) => s.serverConfig.environment);
+  const picked = useKyc((s) => s.addressSandboxOutcome);
+  const shown = picked ?? 'address_attested';
+  const index = Math.max(0, OPTIONS.findIndex((o) => o.key === shown));
+  const [trackWidth, setTrackWidth] = useState(0);
+  // Border box minus borders and padding, quartered — the business toggle's
+  // measurement rule, for four columns.
+  const indicatorWidth = Math.max(0, (trackWidth - 2 * 1 - 2 * 2) / 4);
+  const slide = useRef(new Animated.Value(index)).current;
+
+  useEffect(() => {
+    Animated.timing(slide, {
+      toValue: index,
+      duration: 200,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+  }, [index, slide]);
+
+  if (environment === 'PRODUCTION') return null;
+
+  return (
+    <View style={{ borderRadius: 12, padding: 12 }}>
+      <DashedBorder color={colors.border} radius={12} strokeWidth={1} />
+      <MyazaText variant="label">Test result</MyazaText>
+      <View style={{ height: spacing.sm }} />
+      <View
+        onLayout={(e) => setTrackWidth(e.nativeEvent.layout.width)}
+        style={{
+          flexDirection: 'row',
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: 8,
+          padding: 2,
+        }}
+      >
+        {trackWidth > 0 ? (
+          <Animated.View
+            pointerEvents="none"
+            style={{
+              position: 'absolute',
+              top: 2,
+              bottom: 2,
+              left: 2,
+              width: indicatorWidth,
+              borderRadius: 6,
+              backgroundColor: OPTIONS[index]!.pill,
+              transform: [
+                {
+                  translateX: slide.interpolate({
+                    inputRange: [0, OPTIONS.length - 1],
+                    outputRange: [0, indicatorWidth * (OPTIONS.length - 1)],
+                  }),
+                },
+              ],
+            }}
+          />
+        ) : null}
+        {OPTIONS.map(({ key, label, icon, tint }, i) => {
+          const active = index === i;
+          return (
+            <Pressable
+              key={key}
+              accessibilityRole="button"
+              accessibilityLabel={label}
+              accessibilityState={{ selected: active }}
+              onPress={() => store.getState().setAddressSandboxOutcome(key)}
+              style={{ flex: 1, alignItems: 'center', justifyContent: 'center', height: 40 }}
+            >
+              {/* Above the indicator, or the icon slides out from under it. */}
+              <Icon
+                name={icon}
+                size={18}
+                color={
+                  active
+                    ? '#ffffff'
+                    : (tint ? tint[mode === 'dark' ? 'dark' : 'light'] : colors.textSecondary)
+                }
+              />
+            </Pressable>
+          );
+        })}
+      </View>
+      <View style={{ height: spacing.sm }} />
+      <MyazaText variant="bodySmall" color={colors.textSecondary}>
+        {OPTIONS[index]!.label} is returned instead of judging the pin.
+      </MyazaText>
+    </View>
+  );
+}

package/src/screens/address/AddressSearchField.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { ActivityIndicator, Pressable, TextInput, View } from 'react-native';
+
+import { radius, sizing, spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { useInputFontFamily } from '../../components/fonts';
+import { Icon } from '../../components/Icon';
+
+/**
+ * The address search box.
+ *
+ * Its own field rather than MyazaInput because it needs the return key to
+ * submit (the basic backend is explicit-submit only) and a trailing spinner
+ * while a details call is out — neither of which belongs on the generic input.
+ * The border, radius and height are the SAME tokens, so it reads as one family.
+ */
+export function AddressSearchField({
+  value,
+  onChangeText,
+  busy,
+  showSubmit,
+  canSubmit,
+  autoFocus,
+  onSubmit,
+}: {
+  value: string;
+  onChangeText: (text: string) => void;
+  /** A request is in flight: a details call (autocomplete) or the search. */
+  busy: boolean;
+  /** The basic backend gets an explicit Search button beside the field. */
+  showSubmit: boolean;
+  canSubmit: boolean;
+  autoFocus: boolean;
+  onSubmit: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const fontFamily = useInputFontFamily();
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.sm }}>
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          height: sizing.inputHeight,
+          paddingHorizontal: spacing.md,
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius.sm,
+          backgroundColor: colors.background,
+        }}
+      >
+        <Icon name="search" size={16} color={colors.textSecondary} />
+        <TextInput
+          value={value}
+          onChangeText={onChangeText}
+          placeholder="Search your address, e.g. 12 Adeola Odeku Street"
+          placeholderTextColor={colors.textMuted}
+          accessibilityLabel="Search your address"
+          autoCapitalize="none"
+          // An address is a proper noun: iOS autocorrect rewrites street names
+          // right before the person submits.
+          autoCorrect={false}
+          autoFocus={autoFocus}
+          returnKeyType="search"
+          onSubmitEditing={() => {
+            if (canSubmit) onSubmit();
+          }}
+          style={{
+            flex: 1,
+            height: '100%',
+            marginLeft: spacing.sm,
+            color: colors.textDark,
+            fontSize: 16,
+            fontFamily,
+          }}
+        />
+        {busy && !showSubmit ? <ActivityIndicator size="small" color={colors.textSecondary} /> : null}
+      </View>
+
+      {showSubmit ? (
+        <Pressable
+          onPress={canSubmit ? onSubmit : undefined}
+          disabled={!canSubmit}
+          accessibilityRole="button"
+          accessibilityLabel="Search"
+          // Web's OUTLINE button (`variant="outline" h-11 w-11 rounded-xl`),
+          // which Flutter draws too: a bordered box whose glyph takes the
+          // primary once the query is long enough, never a filled button.
+          style={{
+            width: sizing.inputHeight,
+            height: sizing.inputHeight,
+            borderRadius: radius.sm,
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderWidth: 1,
+            borderColor: colors.border,
+            backgroundColor: colors.background,
+          }}
+        >
+          {busy ? (
+            <ActivityIndicator size="small" color={colors.primary} />
+          ) : (
+            <Icon
+              name="search"
+              size={18}
+              color={canSubmit ? colors.primary : colors.textMuted}
+            />
+          )}
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/src/screens/address/AddressSearchStep.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../../config/theme';
+import { useKyc, useKycStore, useTheme } from '../../components/runtime';
+import { MyazaText } from '../../components/Typography';
+import { pickedAddressState } from '../../lib/address-helpers';
+import { useAddressFlow } from './use-address-flow';
+import { useAddressIntroGate } from './AddressIntroGate';
+import { SearchScreen } from './SearchScreen';
+import { SkipForNow } from './SkipForNow';
+
+/**
+ * Step 1 of the address flow: find the address as words. Every path — a picked
+ * suggestion, the current location, or "place a pin instead" — lands on the pin
+ * step.
+ */
+export function AddressSearchStep(): React.ReactElement {
+  const store = useKycStore();
+  const { colors } = useTheme();
+  const flow = useAddressFlow();
+  const autocomplete = useKyc((s) => s.serverConfig.addressSearchMode === 'autocomplete');
+  const gate = useAddressIntroGate('address-search', flow.steps[0]!);
+
+  // Warm the GPS and its reverse geocode from the moment the flow is reached,
+  // UNDER the primer too: by the time "Got it" is tapped the fix is usually
+  // already resolved, so the row carries the address immediately and the pin
+  // lands with no hesitation.
+  const { startPrefetch } = flow;
+  useEffect(() => {
+    startPrefetch();
+  }, [startPrefetch]);
+
+  if (gate) return gate;
+
+  const toPin = (): void => store.getState().goToStep('address-collection');
+
+  return (
+    <View>
+      <SearchScreen
+        country={flow.country}
+        autocomplete={autocomplete}
+        near={flow.currentFix ? { lat: flow.currentFix.lat, lng: flow.currentFix.lng } : null}
+        locationHint={flow.currentFix?.label ?? null}
+        locating={flow.locating}
+        onUseMyLocation={() => void flow.applyCurrentFix(toPin)}
+        onPinInstead={toPin}
+        onResolved={(hit) => {
+          // The picked address's own country IS the declaration (a pick is
+          // the applicant saying "this is my address"), under the same
+          // guess-only / accepted-list rules as every geocode adoption.
+          flow.adoptGeocodedCountry(hit.country, { explicit: true });
+          const current = store.getState().address;
+          store.getState().setAddress({
+            ...pickedAddressState(current, hit),
+            // `pickedAt` is what makes this a HUMAN-CONFIRMED label: it
+            // survives pin nudges instead of being re-derived on every drag.
+            // Never set it from a reverse geocode.
+            ...(hit.formatted
+              ? { label: hit.formatted, pickedAt: { lat: hit.lat, lng: hit.lng } }
+              : {}),
+            // A pick that RESOLVES a street retires the typed one: that input
+            // only existed because no source knew the street, and a hidden
+            // field must not keep leading the composed line.
+            ...(hit.road ? { street: undefined } : {}),
+            // Places picks carry the breakdown; basic hits fall back to the
+            // label line in the details sheet.
+            ...(hit.road || hit.area || hit.city || hit.state || hit.postcode || hit.country
+              ? {
+                  parts: {
+                    street: hit.road ?? null,
+                    area: hit.area ?? null,
+                    city: hit.city ?? null,
+                    state: hit.state ?? null,
+                    postcode: hit.postcode ?? null,
+                    country: hit.country ?? null,
+                  },
+                }
+              : {}),
+          });
+          toPin();
+        }}
+      />
+
+      {flow.error ? (
+        <MyazaText variant="bodySmall" color={colors.error} style={{ marginTop: spacing.sm }}>
+          {flow.error}
+        </MyazaText>
+      ) : null}
+
+      <SkipForNow requirePin={flow.cfg?.requirePin} onPress={flow.exitForward} />
+    </View>
+  );
+}

package/src/screens/address/CurrentLocationRow.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { ActivityIndicator, Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { Icon } from '../../components/Icon';
+import { MyazaText } from '../../components/Typography';
+
+/**
+ * "Use my current location" as a proper row, not a button pretending to be two:
+ * a medallion showing the fix's state, the RESOLVED ADDRESS underneath the
+ * title — so the person can see where it will take them before tapping — and a
+ * chevron that says this goes somewhere.
+ *
+ * Shared by the search step and by the pin step while no pin exists.
+ */
+export function CurrentLocationRow({
+  hint,
+  locating,
+  onPress,
+}: {
+  /** The device's resolved current address, when known. */
+  hint: string | null;
+  locating: boolean;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel="Use my current location"
+      style={({ pressed }) => ({
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.md,
+        paddingHorizontal: spacing.md - 2,
+        paddingVertical: spacing.md - 4,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: pressed ? colors.primary : colors.border,
+        backgroundColor: pressed ? colors.primary50 : colors.backgroundSecondary,
+      })}
+    >
+      <View
+        style={{
+          width: 40,
+          height: 40,
+          borderRadius: radius.full,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: hint ? colors.primary : colors.primary100,
+        }}
+      >
+        {locating && !hint ? (
+          <ActivityIndicator size="small" color={colors.primary} />
+        ) : (
+          <Icon
+            name={hint ? 'map-pin' : 'locate'}
+            size={18}
+            color={hint ? colors.onPrimary : colors.primary}
+          />
+        )}
+      </View>
+      <View style={{ flex: 1, minWidth: 0 }}>
+        <MyazaText variant="bodyMedium" style={{ fontWeight: '600' }}>
+          Use my current location
+        </MyazaText>
+        <MyazaText variant="bodySmall" color={colors.textSecondary} numberOfLines={1}>
+          {hint ?? (locating ? 'Finding your location…' : 'Lands the pin right where you are')}
+        </MyazaText>
+      </View>
+      <Icon name="chevron-right" size={16} color={colors.textSecondary} />
+    </Pressable>
+  );
+}
+
+/**
+ * The DEMOTED form of the row above, for once a pin exists. Locating again is
+ * then a rare corrective action, so it becomes a labelled chip ON the map,
+ * bottom centre — where the eye and thumb already are, and clear of the corners
+ * that belong to attribution and the zoom controls.
+ *
+ * Off the Continue path and deliberate to hit, where the full-width row invited
+ * a mistaken tap that yanked a confirmed address to wherever the phone was.
+ */
+export function LocateChip({
+  locating,
+  onPress,
+}: {
+  locating: boolean;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View
+      pointerEvents="box-none"
+      style={{ position: 'absolute', left: 0, right: 0, bottom: spacing.md, alignItems: 'center' }}
+    >
+      <Pressable
+        onPress={locating ? undefined : onPress}
+        disabled={locating}
+        accessibilityRole="button"
+        accessibilityLabel="Move the pin to my current location"
+        // Web's `h-10 pl-3 pr-3.5 gap-2 shadow-md`, as Flutter draws it.
+        style={({ pressed }) => ({
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: spacing.sm,
+          height: 40,
+          paddingLeft: spacing.sm + 4,
+          paddingRight: spacing.md - 2,
+          borderRadius: radius.full,
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: pressed ? colors.backgroundSecondary : colors.background,
+          shadowColor: colors.textDark,
+          shadowOpacity: 0.12,
+          shadowRadius: 6,
+          shadowOffset: { width: 0, height: 2 },
+          elevation: 2,
+        })}
+      >
+        {locating ? (
+          <ActivityIndicator size="small" color={colors.textSecondary} />
+        ) : (
+          <Icon name="locate" size={16} color={colors.primary} />
+        )}
+        <MyazaText variant="bodySmall" style={{ fontWeight: '600' }}>
+          {locating ? 'Finding you…' : 'Use my location'}
+        </MyazaText>
+      </Pressable>
+    </View>
+  );
+}

package/src/screens/address/DetailsSheet.tsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useState } from 'react';
+import { Keyboard, Platform, ScrollView, useWindowDimensions, View } from 'react-native';
+
+import { spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { MyazaText } from '../../components/Typography';
+import { MyazaButton } from '../../components/MyazaButton';
+import { FloatingSheet } from '../../components/glass/FloatingSheet';
+import { addressFieldModes, type AddressFieldKey } from '../../lib/address-field-modes';
+import type { AddressCollectionConfig } from '../../types/workflow';
+import { AreaFields, EditField, SectionHeading, type DetailPatch, type DetailValues } from './DetailsSheetFields';
+
+// ---------------------------------------------------------------------------
+// The EDIT-DETAILS sheet, OkHi-style (user decision 2026-08-31): everything on
+// the address is editable. Two grouped sections — street and building, then
+// area and region — with the map's answer prefilling the area fields so the
+// applicant corrects rather than retypes. An untouched prefill is never
+// stored as their claim (the parent only receives what they actually edit).
+//
+// Each typed field honours its workflow mode (lib/address-field-modes.ts):
+// 'off' hides it, 'required' marks it and holds the pin step's Continue.
+// Mirrors the web SDK's DetailsSheet; keep the two in lockstep.
+//
+// Rides the same FloatingSheet every other picker in the SDK uses, and lifts
+// above the keyboard like the key-person sheet, since this one is a form.
+// ---------------------------------------------------------------------------
+
+export type DetailsPatch = DetailPatch;
+
+export function DetailsSheet({
+  isBusiness,
+  parts,
+  country,
+  directionsRequired,
+  addressConfig,
+  values,
+  disabled,
+  onChange,
+  onClose,
+}: {
+  isBusiness: boolean;
+  /** The map's answer, broken down — the prefill for the area fields. */
+  parts: { street?: string | null; area?: string | null; city?: string | null; state?: string | null; postcode?: string | null } | null;
+  /** The flow's ISO-2 country (read-only: a verification fact, not a field). */
+  country: string | null;
+  directionsRequired: boolean;
+  /** The flow's address step: which typed fields are offered or required. */
+  addressConfig: AddressCollectionConfig | null | undefined;
+  values: DetailValues;
+  disabled: boolean;
+  onChange: (patch: DetailsPatch) => void;
+  onClose: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const { height: screenHeight } = useWindowDimensions();
+  const [keyboard, setKeyboard] = useState(0);
+
+  useEffect(() => {
+    const show = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hide = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const shown = Keyboard.addListener(show, (e) => setKeyboard(e.endCoordinates.height));
+    const hidden = Keyboard.addListener(hide, () => setKeyboard(0));
+    return () => {
+      shown.remove();
+      hidden.remove();
+    };
+  }, []);
+
+  const available = screenHeight - keyboard;
+  const maxHeight = Math.min(available * 0.92, screenHeight * 0.85);
+
+  const modes = addressFieldModes(addressConfig);
+  const on = (k: AddressFieldKey) => modes[k] !== 'off';
+  const req = (k: AddressFieldKey) => modes[k] === 'required';
+  const anyRequired = (Object.keys(modes) as AddressFieldKey[]).some(req);
+
+  // Typed wins (a cleared field STAYS cleared); the map's answer fills the
+  // gap only while the applicant has never touched the field.
+  const shown = (typed: string | undefined, part: string | null | undefined) =>
+    typed ?? part?.trim() ?? '';
+
+  const twoCol = { flexDirection: 'row' as const, gap: spacing.sm };
+  const col = { flex: 1, minWidth: 0 };
+  const showStreetSection = on('propertyNumber') || on('street') || on('unit') || on('propertyName');
+
+  return (
+    <FloatingSheet visible onClose={onClose} maxHeight={maxHeight} bottomOffset={keyboard} closeLabel="Close">
+      <View style={{ paddingHorizontal: spacing.md, paddingTop: spacing.xs, paddingBottom: spacing.sm }}>
+        {/* One close control, not two: FloatingSheet already carries its own
+            in the same corner, and the pair read as a mis-render. */}
+        <MyazaText variant="body" style={{ fontWeight: '700' }}>
+          Edit your address
+        </MyazaText>
+        <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: 2 }}>
+          {anyRequired
+            ? 'Correct anything the map got wrong. Fields marked * are required.'
+            : 'Correct anything the map got wrong. Every field is optional, and it all helps someone find the door.'}
+        </MyazaText>
+      </View>
+
+      <ScrollView
+        bounces={false}
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={{ paddingHorizontal: spacing.md, paddingBottom: spacing.sm }}
+      >
+        {showStreetSection ? <SectionHeading>Street and building</SectionHeading> : null}
+        {on('propertyNumber') || on('street') ? (
+          <View style={twoCol}>
+            {on('propertyNumber') ? (
+              <View style={col}>
+                <EditField label="Number" value={values.propertyNumber ?? ''} placeholder="e.g. 11" maxLength={20} disabled={disabled} required={req('propertyNumber')} onChange={(propertyNumber) => onChange({ propertyNumber })} />
+              </View>
+            ) : null}
+            {on('street') ? (
+              <View style={col}>
+                <EditField label="Street name" value={shown(values.street, parts?.street)} placeholder="e.g. Awolowo Road" maxLength={120} disabled={disabled} required={req('street')} onChange={(street) => onChange({ street })} />
+              </View>
+            ) : null}
+          </View>
+        ) : null}
+        {on('unit') || on('propertyName') ? (
+          <View style={[twoCol, { marginTop: spacing.sm }]}>
+            {on('unit') ? (
+              <View style={col}>
+                <EditField label="Unit" value={values.unit ?? ''} placeholder="e.g. Flat 4" maxLength={30} disabled={disabled} required={req('unit')} onChange={(unit) => onChange({ unit })} />
+              </View>
+            ) : null}
+            {on('propertyName') ? (
+              <View style={col}>
+                <EditField label="Building name" value={values.propertyName ?? ''} placeholder="e.g. Sunrise Villa" maxLength={80} disabled={disabled} required={req('propertyName')} onChange={(propertyName) => onChange({ propertyName })} />
+              </View>
+            ) : null}
+          </View>
+        ) : null}
+        <View style={{ marginTop: spacing.sm }}>
+          <EditField
+            label={`${isBusiness ? 'Directions to the entrance' : 'Directions to this address'}${directionsRequired ? '' : ' (optional)'}`}
+            value={values.directions ?? ''}
+            placeholder="e.g. black gate opposite the kiosk, second building after the junction"
+            maxLength={500}
+            multiline
+            disabled={disabled}
+            onChange={(directions) => onChange({ directions })}
+          />
+        </View>
+
+        <AreaFields modes={modes} values={values} parts={parts} shown={shown} country={country} disabled={disabled} onChange={onChange} />
+      </ScrollView>
+
+      {/* Bottom padding to match the web sheet's pb-6: the card floats clear
+          of the screen edge by 8, so 16 here lands the button the same
+          distance off the home indicator as the web drawer sits off the
+          bottom of the window. */}
+      <View style={{ paddingHorizontal: spacing.md, paddingTop: spacing.sm, paddingBottom: spacing.md }}>
+        <MyazaButton label="Done" onPress={onClose} />
+      </View>
+    </FloatingSheet>
+  );
+}
+
+/** Kept beside the sheet so the pin step's summary row and this share one
+ *  shape for the "N details added" count — every editable claim counts. */
+export function detailCount(values: Partial<DetailValues>): number {
+  return [
+    values.propertyNumber,
+    values.street,
+    values.unit,
+    values.propertyName,
+    values.directions,
+    values.neighbourhood,
+    values.city,
+    values.state,
+    values.postcode,
+  ].filter((v) => v?.trim()).length;
+}