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

package/src/screens/SubmittedStep.tsx

@@ -1,67 +1,58 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { View } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
-import { radius, spacing } from '../config/theme';
 import { mapToKycError, safeReportError } from '../services/errors';
 import { contactStepFor, expiredContactChannels } from '../lib/contact-recovery';
-import type { KYCError, KYCSubmission } from '../types/verification';
-import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
-import { MyazaText } from '../components/Typography';
-import { MyazaButton } from '../components/MyazaButton';
-import { MyazaAlert } from '../components/MyazaAlert';
-import { MyazaPulseLoader } from '../components/MyazaPulseLoader';
-import { Icon } from '../components/Icon';
-import { fillTokens } from '../utils/tokens';
-import { KeepLinksSheet } from './KeepLinksSheet';
-import { KeyPeopleAwaitList, rowsFromServer } from './KeyPeopleAwaitList';
-import { KeyPeoplePending } from './KeyPeoplePending';
-import { useAwaitingPeople } from './useAwaitingPeople';
+import { KYCError, type KYCSubmission } from '../types/verification';
+import { useKyc, useKycConfig, useKycStore } from '../components/runtime';
+import { configScope } from '../lib/scope';
+import { describeWaiting } from '../lib/result-copy';
+import { biometricCopyFor } from '../lib/biometric-copy';
+import { awaitSelfieUpload, IDLE_SELFIE_UPLOAD } from '../lib/selfie-upload-wait';
+import { showsDoneButton, showsSelfieReview, waitsForResult } from '../config/biometricOptions';
+import { SubmittedWaiting } from './SubmittedWaiting';
+import { SubmittedResult } from './SubmittedResult';
+import { SubmittedSuccess } from './SubmittedSuccess';
+import { SubmittedError } from './SubmittedError';
 
-// Terminal screen — 1:1 with the Flutter SDK's SubmittedScreen. Calls
-// submitAsync on mount; renders submitting / success / error views with the same
-// badges + copy. The header title is empty for this step.
+// Terminal step — 1:1 with the Flutter SDK's SubmittedScreen. Calls submitAsync
+// on mount and renders one of: the waiting screen, the success screen, the
+// error screen, or (on a flow that waits for its verdict) the result screen,
+// which owns the whole wait from the first render. The views live in their
+// own files (200-line rule); this file is the orchestration only. The header
+// title is empty for this step.
 
 type Phase = 'submitting' | 'success' | 'error';
 
-const DEFAULT_SUCCESS_TITLE = 'Verification Submitted!';
-// The default description depends on WHAT was submitted. A KYB applicant told
-// "your identity verification has been submitted" is being told about the wrong
-// thing: they submitted a company. Mirrors the web SDK's successDescription.
-const defaultSuccessDescription = (isBusiness: boolean): string =>
-  isBusiness
-    ? "Your business verification has been submitted for review. You'll be notified of the result."
-    : "Your identity verification has been submitted for review. You'll be notified of the result.";
-
-const ERROR_TITLES: Record<string, string> = {
-  insufficient_credits: 'Credits Exhausted',
-  invalid_api_key: 'Authentication Failed',
-  feature_disabled: 'Verification Unavailable',
-  upload_failed: 'Upload Failed',
-  network_error: 'Connection Failed',
-};
-
 export function SubmittedStep({ onClose }: { onClose: () => void }): React.ReactElement {
-  const { colors } = useTheme();
   const config = useKycConfig();
   const store = useKycStore();
   const existingResult = useKyc((s) => s.submissionResult);
 
   const [phase, setPhase] = useState<Phase>('submitting');
-  // The people list comes from the SERVER once registry discovery settles —
-  // the submit-time invites are a first draft the register can contradict
-  // (it adds people the applicant never listed, including ones they removed).
-  const sessionId = useKyc((s) => s.sessionId);
-  const settled = useAwaitingPeople(store.getState().api, sessionId, phase === 'success');
   const [error, setError] = useState<KYCError | null>(null);
-  const [keepLinksOpen, setKeepLinksOpen] = useState(false);
   const [retry, setRetry] = useState<{ attempt: number; total: number } | null>(null);
   const reportedRef = useRef(false);
   const kickedRef = useRef(false);
 
-  const submit = React.useCallback(async () => {
+  const submit = useCallback(async () => {
     setPhase('submitting');
     setError(null);
     setRetry(null);
+    // The biometric scopes hand over BEFORE the selfie upload lands (the
+    // review is off, so nothing on the liveness step gated on it): wait for
+    // the upload's own record here, under the same loading screen. A failed
+    // upload was already reported to onError by the hook that ran it.
+    if (!showsSelfieReview(config)) {
+      const upload = await awaitSelfieUpload({
+        read: () => ({ selfieUpload: store.getState().selfieUpload, selfieMediaId: store.getState().mediaIds.selfie }),
+        subscribe: (listener) => store.subscribe(listener),
+      });
+      if (!upload.ok) {
+        setError(new KYCError('upload_failed', upload.message));
+        setPhase('error');
+        return;
+      }
+    }
     try {
       const result = await store.getState().submitAsync((attempt, total) => setRetry({ attempt, total }));
       const submission: KYCSubmission = {
@@ -105,134 +96,50 @@ export function SubmittedStep({ onClose }: { onClose: () => void }): React.React
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (phase === 'submitting') {
-    const retrying = retry != null;
+  // Try Again after a failed selfie upload re-enters the liveness step, whose
+  // mount resumes the interrupted upload and hands straight back here. The
+  // record is reset first so this step waits for the NEW attempt rather than
+  // reading the old failure a second time.
+  const retryUpload = () => {
+    store.getState().setSelfieUpload(IDLE_SELFIE_UPLOAD);
+    store.getState().goToStep('liveness');
+  };
+
+  if (phase === 'error' && error) {
     return (
-      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', paddingVertical: spacing.xl }}>
-        <MyazaPulseLoader />
-        <View style={{ height: spacing.lg }} />
-        <MyazaText variant="heading3" style={{ textAlign: 'center' }}>
-          {retrying ? 'Reconnecting…' : 'Submitting your verification…'}
-        </MyazaText>
-        <View style={{ height: spacing.sm }} />
-        <MyazaText variant="bodyMedium" style={{ textAlign: 'center' }}>
-          {retrying ? `Connection issue — retrying (${retry!.attempt}/${retry!.total})…` : 'Please wait a moment.'}
-        </MyazaText>
-      </View>
+      <SubmittedError
+        error={error}
+        onRetry={error.code === 'upload_failed' ? retryUpload : error.code === 'network_error' ? () => void submit() : null}
+        onClose={onClose}
+      />
     );
   }
 
-  if (phase === 'error' && error) {
-    const title = ERROR_TITLES[error.code] ?? 'Submission Failed';
-    const canRetry = error.code === 'network_error';
+  // A flow that waits for its verdict (a biometric re-authentication, by
+  // default) renders the result screen from the FIRST render: it shows the
+  // one loading screen through the upload, the submission and the poll, then
+  // the verdict. onSubmit has already fired by the time the id lands: the
+  // submission is a fact whichever screen follows it.
+  if (waitsForResult(config)) {
     return (
-      <View style={{ flex: 1, justifyContent: 'space-between' }}>
-        <View style={{ alignItems: 'center' }}>
-          <View style={{ height: spacing.xl }} />
-          <Badge bg={colors.errorBg} border={`${colors.error}4D`}>
-            <Icon name="alert" size={44} color={colors.error} />
-          </Badge>
-          <View style={{ height: spacing.lg }} />
-          <MyazaText variant="heading1" style={{ textAlign: 'center' }}>
-            {title}
-          </MyazaText>
-          <View style={{ height: spacing.md }} />
-          <View style={{ width: '100%', paddingHorizontal: spacing.md }}>
-            <MyazaAlert variant="error" title="What happened" message={error.message} />
-          </View>
-        </View>
-        <View style={{ flexDirection: 'row', gap: spacing.md }}>
-          {canRetry ? (
-            <View style={{ flex: 1 }}>
-              <MyazaButton label="Try Again" variant="outline" leadingIcon="refresh" onPress={() => void submit()} />
-            </View>
-          ) : null}
-          <View style={{ flex: 1 }}>
-            <MyazaButton label="Close" onPress={onClose} />
-          </View>
-        </View>
-      </View>
+      <SubmittedResult
+        verificationId={phase === 'success' ? (existingResult?.verificationId ?? null) : null}
+        retry={retry}
+        showDone={showsDoneButton(config)}
+        onClose={onClose}
+      />
     );
   }
 
-  // success
-  const title = config.success?.title ? fillTokens(config.success.title, config.userData) : DEFAULT_SUCCESS_TITLE;
-  const description = config.success?.description
-    ? fillTokens(config.success.description, config.userData)
-    : defaultSuccessDescription(config.subjectType === 'business');
-  // KYB: whether a people list is COMING (the submit minted invites). The list
-  // itself renders from the server's reconciled view, never from this draft.
-  const invitesExpected = store.getState().keyPeopleInvites.length > 0;
-
-  // People still owing a check when the applicant leaves. The settled list is
-  // authoritative once it arrives; before that, minted invites are the signal.
-  const outstanding = settled
-    ? settled.some((r) => r.status === 'pending' || r.status === 'failed')
-    : invitesExpected;
-  const sessionUrl = store.getState().sessionUrl;
-  // Tapping Done with links still live: offer the web page those links live
-  // on, because this screen dies with the app and the links die with it.
-  // Workflow opt-out: `keyPeopleLinkRecovery: false` (on by default).
-  const offerRecovery =
-    outstanding && !!sessionUrl && config.keyPeopleLinkRecovery !== false;
-
-  return (
-    <View style={{ flex: 1, justifyContent: 'space-between' }}>
-      <View style={{ alignItems: 'center' }}>
-        <View style={{ height: spacing.xl }} />
-        <Badge bg={colors.successBg} border={`${colors.success}4D`}>
-          <Icon name="check" size={44} color={colors.success} />
-        </Badge>
-        <View style={{ height: spacing.lg }} />
-        <MyazaText variant="heading1" style={{ textAlign: 'center' }}>
-          {title}
-        </MyazaText>
-        <View style={{ height: spacing.sm }} />
-        <MyazaText variant="bodyMedium" style={{ textAlign: 'center' }}>
-          {description}
-        </MyazaText>
-        {settled
-          ? settled.length > 0
-            ? <KeyPeopleAwaitList rows={rowsFromServer(settled)} />
-            : null
-          : invitesExpected
-            ? <KeyPeoplePending />
-            : null}
-      </View>
-      <MyazaButton
-        label="Done"
-        onPress={() => (offerRecovery ? setKeepLinksOpen(true) : onClose())}
-      />
-      {offerRecovery ? (
-        <KeepLinksSheet
-          open={keepLinksOpen}
-          url={sessionUrl!}
-          onClose={() => setKeepLinksOpen(false)}
-          onDone={() => {
-            setKeepLinksOpen(false);
-            onClose();
-          }}
-        />
-      ) : null}
-    </View>
-  );
-}
+  if (phase === 'submitting') {
+    const copy = describeWaiting({
+      scope: configScope(config),
+      waitsForResult: false,
+      retry,
+      override: biometricCopyFor(config).waiting,
+    });
+    return <SubmittedWaiting title={copy.title} description={copy.description} retrying={retry != null} />;
+  }
 
-function Badge({ bg, border, children }: { bg: string; border: string; children: React.ReactNode }): React.ReactElement {
-  return (
-    <View
-      style={{
-        width: 88,
-        height: 88,
-        borderRadius: radius.full,
-        backgroundColor: bg,
-        borderWidth: 2,
-        borderColor: border,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {children}
-    </View>
-  );
+  return <SubmittedSuccess showDone={showsDoneButton(config)} onClose={onClose} />;
 }

package/src/screens/SubmittedSuccess.tsx

@@ -0,0 +1,127 @@
+import React, { 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 { Icon } from '../components/Icon';
+import { fillTokens } from '../utils/tokens';
+import { configScope } from '../lib/scope';
+import { KeepLinksSheet } from './KeepLinksSheet';
+import { KeyPeopleAwaitList, rowsFromServer } from './KeyPeopleAwaitList';
+import { PresenceExpectations } from '../components/PresenceBlocks';
+import { StaggerIn } from '../components/StaggerIn';
+import { KeyPeoplePending } from './KeyPeoplePending';
+import { useAwaitingPeople } from './useAwaitingPeople';
+import { Badge } from './SubmittedBadge';
+
+// The submitted step's success screen (split from SubmittedStep, 200-line
+// rule): the org's success copy, the presence expectations, the KYB key
+// people still owing a check, and Done. `showDone` is the biometric scopes'
+// `doneButton` option: off when the host app closes the flow itself.
+
+const DEFAULT_SUCCESS_TITLE = 'Verification Submitted!';
+// The default description depends on WHAT was submitted. A KYB applicant told
+// "your identity verification has been submitted" is being told about the wrong
+// thing: they submitted a company, and an address-only applicant submitted a
+// pin. Mirrors the web SDK's successDescription (scope map included).
+const SCOPE_DESCRIPTIONS: Record<string, string> = {
+  address: "Your address verification has been submitted. You'll be notified of the result.",
+  'biometric-authentication': "Your face check has been submitted. You'll be notified of the result.",
+  'biometric-enrollment': "Your selfie is saved as the reference for your future face checks.",
+  questionnaire: "Your answers have been submitted. You'll be notified of the result.",
+  contact: "Your contact verification has been submitted. You'll be notified of the result.",
+};
+const defaultSuccessDescription = (isBusiness: boolean, scope: string | null): string => {
+  if (scope && SCOPE_DESCRIPTIONS[scope]) return SCOPE_DESCRIPTIONS[scope]!;
+  return isBusiness
+    ? "Your business verification has been submitted for review. You'll be notified of the result."
+    : "Your identity verification has been submitted for review. You'll be notified of the result.";
+};
+
+export function SubmittedSuccess({ showDone, onClose }: { showDone: boolean; onClose: () => void }): React.ReactElement {
+  const { colors } = useTheme();
+  const config = useKycConfig();
+  const store = useKycStore();
+  // The people list comes from the SERVER once registry discovery settles —
+  // the submit-time invites are a first draft the register can contradict
+  // (it adds people the applicant never listed, including ones they removed).
+  const sessionId = useKyc((s) => s.sessionId);
+  const settled = useAwaitingPeople(store.getState().api, sessionId, true);
+  const [keepLinksOpen, setKeepLinksOpen] = useState(false);
+
+  const title = config.success?.title ? fillTokens(config.success.title, config.userData) : DEFAULT_SUCCESS_TITLE;
+  const description = config.success?.description
+    ? fillTokens(config.success.description, config.userData)
+    : defaultSuccessDescription(config.subjectType === 'business', configScope(config));
+  // KYB: whether a people list is COMING (the submit minted invites). The list
+  // itself renders from the server's reconciled view, never from this draft.
+  const invitesExpected = store.getState().keyPeopleInvites.length > 0;
+
+  // People still owing a check when the applicant leaves. The settled list is
+  // authoritative once it arrives; before that, minted invites are the signal.
+  const outstanding = settled
+    ? settled.some((r) => r.status === 'pending' || r.status === 'failed')
+    : invitesExpected;
+  const sessionUrl = store.getState().sessionUrl;
+  // Tapping Done with links still live: offer the web page those links live
+  // on, because this screen dies with the app and the links die with it.
+  // Workflow opt-out: `keyPeopleLinkRecovery: false` (on by default).
+  const offerRecovery = outstanding && !!sessionUrl && config.keyPeopleLinkRecovery !== false;
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'space-between' }}>
+      <View style={{ alignItems: 'center' }}>
+        <View style={{ height: spacing.xl }} />
+        {/* Lands in the order Flutter's success view does: badge, title,
+            description, then Done (delays 0 / 200 / 320 / 600 ms). */}
+        <StaggerIn>
+          <Badge bg={colors.successBg} border={`${colors.success}4D`}>
+            <Icon name="check" size={44} color={colors.success} />
+          </Badge>
+        </StaggerIn>
+        <View style={{ height: spacing.lg }} />
+        <StaggerIn delayMs={200}>
+          <MyazaText variant="heading1" style={{ textAlign: 'center' }}>
+            {title}
+          </MyazaText>
+        </StaggerIn>
+        <View style={{ height: spacing.sm }} />
+        <StaggerIn delayMs={320}>
+          <MyazaText variant="bodyMedium" style={{ textAlign: 'center' }}>
+            {description}
+          </MyazaText>
+        </StaggerIn>
+        {config.addressCollection?.presence?.enabled === true && store.getState().address ? (
+          <PresenceExpectations />
+        ) : null}
+        {settled
+          ? settled.length > 0
+            ? <KeyPeopleAwaitList rows={rowsFromServer(settled)} />
+            : null
+          : invitesExpected
+            ? <KeyPeoplePending />
+            : null}
+      </View>
+      {showDone ? (
+        <StaggerIn delayMs={600}>
+          <MyazaButton label="Done" onPress={() => (offerRecovery ? setKeepLinksOpen(true) : onClose())} />
+        </StaggerIn>
+      ) : (
+        <View />
+      )}
+      {offerRecovery ? (
+        <KeepLinksSheet
+          open={keepLinksOpen}
+          url={sessionUrl!}
+          onClose={() => setKeepLinksOpen(false)}
+          onDone={() => {
+            setKeepLinksOpen(false);
+            onClose();
+          }}
+        />
+      ) : null}
+    </View>
+  );
+}

package/src/screens/SubmittedWaiting.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaPulseLoader } from '../components/MyazaPulseLoader';
+
+// ─── The one loading screen ─────────────────────────────────────────────────
+//
+// Every wait after the capture renders THIS, with copy from
+// lib/result-copy.ts: the selfie upload, the submission and (on a flow that
+// waits for its verdict) the status poll all show one loader under one title.
+// Three screens with three sentences read as three things going wrong; one
+// screen reads as the check running. A retry in flight swaps only the
+// description, in the warning colour.
+
+export function SubmittedWaiting({
+  title,
+  description,
+  retrying = false,
+}: {
+  title: string;
+  description: string;
+  retrying?: boolean;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', paddingVertical: spacing.xl }}>
+      <MyazaPulseLoader />
+      <View style={{ height: spacing.lg }} />
+      <MyazaText variant="heading3" style={{ textAlign: 'center' }}>
+        {title}
+      </MyazaText>
+      <View style={{ height: spacing.sm }} />
+      <MyazaText
+        variant="bodyMedium"
+        color={retrying ? colors.warning : undefined}
+        style={{ textAlign: 'center', paddingHorizontal: spacing.lg }}
+      >
+        {description}
+      </MyazaText>
+    </View>
+  );
+}

package/src/screens/address/AddressEntranceStep.tsx

@@ -0,0 +1,161 @@
+import React, { useCallback, useEffect, useState } 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 { MyazaButton } from '../../components/MyazaButton';
+import { MediaSourceSheet } from '../../components/MediaSourceSheet';
+import { StickyActions } from '../../components/StickyActions';
+import { withRetry } from '../../services/retry';
+import { compressDocumentImage } from '../../services/mediaCompress';
+import { addressVendorsStubbed } from '../../lib/address-flow';
+import { streetViewFrameUrlOf } from '../../lib/map-frame';
+import { useAddressPhotoAttach, type AddressPhotoPick } from '../useAddressPhotoAttach';
+import { useAddressFlow } from './use-address-flow';
+import { EntranceDropzone } from './EntranceDropzone';
+import { EntrancePlaceholder } from './EntranceFraming';
+import { FramedStreetView } from './FramedStreetView';
+
+/**
+ * The entrance step: Street View FIRST — it opens automatically wherever
+ * Google has photographed the street, because framing beats fumbling for a
+ * camera — and the applicant's own photo is the fallback (no coverage, or
+ * they skip). Capturing a frame advances straight to review. The panorama
+ * reaches a phone the way the map does: the hosted /embed/street-view page in
+ * a WebView on the app grant (FramedStreetView). Mirrors the web and Flutter
+ * AddressEntranceStep.
+ */
+export function AddressEntranceStep(): React.ReactElement | null {
+  const store = useKycStore();
+  const flow = useAddressFlow();
+  const mapsFrameUrl = useKyc((s) => s.serverConfig.mapsFrameUrl ?? null);
+  const vendorsStubbed = addressVendorsStubbed({
+    environment: useKyc((s) => s.serverConfig.environment ?? null),
+  });
+  const svFrameUrl = mapsFrameUrl ? streetViewFrameUrlOf(mapsFrameUrl) : null;
+  // Street View can be shown: offered by the flow, a pin to look from, and
+  // either the sandbox stand-in or a framed page to load.
+  const streetView = flow.streetViewOffered && Boolean(flow.pin) && (vendorsStubbed || Boolean(svFrameUrl));
+  const [mode, setMode] = useState<'framing' | 'photo'>(() => (streetView ? 'framing' : 'photo'));
+  const [skipped, setSkipped] = useState(false);
+  const framing = mode === 'framing' && streetView && Boolean(flow.pin);
+
+  // The sheet header describes the framing while it is up, the photo after.
+  useEffect(() => {
+    store.getState().setAddressEntranceFraming(framing);
+    return () => store.getState().setAddressEntranceFraming(false);
+  }, [framing, store]);
+
+  // Fell back to the photo with the photo input off: nothing left to capture
+  // here, carry on. (The never-offered case is `recoverAddressStep`'s.)
+  const { goNext } = flow;
+  const emptyAfterFallback = !framing && flow.streetViewOffered && flow.photoMode === 'off';
+  useEffect(() => {
+    if (emptyAfterFallback) goNext();
+  }, [emptyAfterFallback, goNext]);
+
+  // Nothing to capture at all: this step is absent from the flow, and the
+  // address flow's own recovery moves the applicant, not this screen.
+  if (flow.photoMode === 'off' && !flow.streetViewOffered) return null;
+
+  if (framing && flow.pin) {
+    const svRequired = flow.cfg?.streetView === 'required';
+    const toPhoto = (wasSkip: boolean) => {
+      setSkipped(wasSkip);
+      setMode('photo');
+    };
+    if (vendorsStubbed) {
+      return <EntrancePlaceholder hideSkip={svRequired} onSkip={() => toPhoto(true)} onUse={() => flow.goNext()} />;
+    }
+    return (
+      <FramedStreetView
+        frameUrl={svFrameUrl!}
+        pin={flow.pin}
+        hideSkip={svRequired}
+        onCaptured={(frame) => {
+          const current = store.getState().address;
+          if (current) store.getState().setAddress({ ...current, streetView: frame });
+          flow.goNext();
+        }}
+        onSkip={() => toPhoto(true)}
+        onUnavailable={() => toPhoto(false)}
+      />
+    );
+  }
+  if (emptyAfterFallback) return null;
+  return <EntrancePhoto flow={flow} skipped={skipped} />;
+}
+
+/** The photo half, split so the framing branch above stays hook-free. */
+function EntrancePhoto({
+  flow,
+  skipped,
+}: {
+  flow: ReturnType<typeof useAddressFlow>;
+  skipped: boolean;
+}): React.ReactElement {
+  const store = useKycStore();
+  const { colors } = useTheme();
+  const photoId = useKyc((s) => s.mediaIds.addressPhoto);
+  const previewUri = useKyc((s) => s.addressPhotoPreview);
+  const { pickPhoto, setError } = flow;
+
+  const upload = useCallback(
+    async ({ uri, mimeType, name }: AddressPhotoPick) => {
+      await pickPhoto(async () => {
+        const finalUri = await compressDocumentImage(uri).catch(() => uri);
+        return withRetry(() => store.getState().api.upload({ uri: finalUri, type: mimeType, name }, 'address_photo'));
+      }, uri);
+    },
+    [pickPhoto, store],
+  );
+
+  const { pick, sheetOpen, closeSheet, choosePhoto, takePhoto } = useAddressPhotoAttach(upload, setError);
+
+  const uploaded = Boolean(photoId);
+  const required = flow.photoMode === 'required';
+
+  return (
+    <StickyActions
+      actions={
+        <MyazaButton
+          label={uploaded || required ? 'Continue' : 'Continue without a photo'}
+          disabled={flow.uploading || (required && !uploaded)}
+          onPress={() => flow.goNext()}
+        />
+      }
+    >
+      <MediaSourceSheet
+        open={sheetOpen}
+        onClose={closeSheet}
+        title="Add a photo of the entrance"
+        options={[
+          { icon: 'camera', label: 'Take a photo', caption: 'Photograph the entrance now', onPress: () => void takePhoto() },
+          { icon: 'image', label: 'Photo library', caption: 'Pick a photo you already have', onPress: () => void choosePhoto() },
+        ]}
+      />
+
+      {skipped ? (
+        <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginBottom: spacing.sm }}>
+          No problem. A quick photo of the entrance works just as well.
+        </MyazaText>
+      ) : null}
+
+      <EntranceDropzone
+        uploaded={uploaded}
+        uploading={flow.uploading}
+        previewUri={previewUri}
+        required={required}
+        onPick={() => pick()}
+        onRemove={flow.removePhoto}
+      />
+
+      {flow.error ? (
+        <MyazaText variant="bodySmall" color={colors.error} style={{ marginTop: spacing.sm }}>
+          {flow.error}
+        </MyazaText>
+      ) : null}
+    </StickyActions>
+  );
+}