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

package/src/screens/SupportingDocumentCard.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { BusinessDocumentSlot } from './BusinessDocumentSlot';
+import {
+  DocumentMarker,
+  DocumentReads,
+  DocumentStatePill,
+} from './supportingDocumentParts';
+
+// ---------------------------------------------------------------------------
+// One requested supporting document: what it is, what it is being taken FOR,
+// and the upload that satisfies it.
+//
+// The middle part is the point. A supporting document is whatever the
+// organisation named it, so an upload slot with a title on it tells the
+// applicant almost nothing; naming the values that will be read off it says
+// what the document is actually for, and is the honest thing to show somebody
+// before they hand over a bank statement.
+//
+// MIRRORS the web SDK's SupportingDocumentCard and the Flutter one. Keep the
+// three in step.
+// ---------------------------------------------------------------------------
+
+export function SupportingDocumentCard({
+  position,
+  total,
+  label,
+  description,
+  required,
+  reads,
+  fileName,
+  uploading,
+  previewUri = null,
+  isPdf = false,
+  error = null,
+  onPick,
+  onRemove,
+}: {
+  /** 1-based, so the list reads as a checklist rather than a pile. */
+  position: number;
+  total: number;
+  label: string;
+  /** Guidance the organisation wrote: which document, and what it has to show. */
+  description: string | null;
+  required: boolean;
+  /** The named values the server will read off it, in the author's words. */
+  reads: readonly string[];
+  fileName: string | null;
+  uploading: boolean;
+  previewUri?: string | null;
+  isPdf?: boolean;
+  error?: string | null;
+  onPick: () => void;
+  onRemove: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const done = fileName !== null && !uploading;
+
+  return (
+    <View
+      accessibilityLabel={label}
+      style={{
+        marginBottom: spacing.md,
+        borderWidth: 1,
+        borderRadius: radius.md,
+        overflow: 'hidden',
+        // The card is the LIFTED surface and the wells inside it are the page
+        // colour — the web SDK's arrangement (a `bg-secondary` card over a
+        // `bg-background` well), which Flutter also takes.
+        backgroundColor: done ? colors.primary50 : colors.backgroundSecondary,
+        borderColor: done ? colors.primary200 : colors.border,
+      }}
+    >
+      <View style={{ padding: spacing.md }}>
+        <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+          <DocumentMarker done={done} position={position} total={total} />
+          <View style={{ width: spacing.sm + 4 }} />
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <MyazaText variant="label" style={{ fontWeight: '600' }}>
+              {label}
+            </MyazaText>
+            {description ? (
+              <MyazaText
+                variant="bodySmall"
+                color={colors.textDark}
+                style={{ marginTop: 4, opacity: 0.75 }}
+              >
+                {description}
+              </MyazaText>
+            ) : null}
+          </View>
+          <View style={{ width: spacing.sm }} />
+          <DocumentStatePill required={required} />
+        </View>
+
+        {reads.length > 0 ? (
+          <>
+            <View style={{ height: spacing.sm + 4 }} />
+            <DocumentReads reads={reads} />
+          </>
+        ) : null}
+      </View>
+
+      <View style={{ height: 1, backgroundColor: colors.border }} />
+
+      <View style={{ padding: spacing.sm + 4 }}>
+        <BusinessDocumentSlot
+          label={label}
+          required={required}
+          fileName={fileName}
+          uploading={uploading}
+          previewUri={previewUri}
+          isPdf={isPdf}
+          onPick={onPick}
+          onRemove={onRemove}
+          compact
+        />
+        {error ? (
+          <MyazaText
+            variant="bodySmall"
+            color={colors.error}
+            style={{ marginTop: spacing.sm }}
+          >
+            {error}
+          </MyazaText>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/screens/SupportingDocumentsStep.tsx

@@ -0,0 +1,203 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaButton } from '../components/MyazaButton';
+import { MediaSourceSheet } from '../components/MediaSourceSheet';
+import { SupportingDocumentCard } from './SupportingDocumentCard';
+import { withRetry } from '../services/retry';
+import { compressDocumentImage } from '../services/mediaCompress';
+import {
+  resolveSupportingDocuments,
+  verifiedIdsFor,
+  type RequestedSupportingDocument,
+} from '../config/supportingDocuments';
+import { useBusinessDocumentAttach } from './useBusinessDocumentAttach';
+import { supportingDocumentsIntro } from '../lib/supportingDocumentsIntro';
+
+// ---------------------------------------------------------------------------
+// Supporting documents — artefacts the organisation keeps ON FILE.
+//
+// These are NOT the identity evidence this verification is decided on. The
+// person has already been checked against the government record by the time
+// they reach this screen, so a document that cannot be read costs them
+// nothing: the server records it and the verification stands on the lookup.
+//
+// WHICH documents are asked for depends on the ID they picked (a document may
+// exist only because they used a particular ID), so the screen is only in the
+// order when that resolution produced something — see store/derive.ts.
+//
+// Layout mirrors the web SDK's SupportingDocumentCard and the Flutter one 1:1:
+// a card per document naming what it is being taken FOR, over the same source
+// sheet and the same Continue rule as the business-documents screen.
+// ---------------------------------------------------------------------------
+
+/** The header, from the slots the flow actually resolved for this applicant.
+ *  A function because the line carries the COUNTS: how many documents have to
+ *  be produced before they can go on. */
+export const supportingDocumentsMeta = (
+  slots: ReadonlyArray<{ required: boolean }>,
+): { title: string; description: string } => ({
+  title: 'Supporting documents',
+  description: supportingDocumentsIntro(slots),
+});
+
+export function SupportingDocumentsStep(): React.ReactElement {
+  const config = useKycConfig();
+  const store = useKycStore();
+  const { colors } = useTheme();
+  const uploaded = useKyc((s) => s.supportingDocuments);
+  const selectedCountry = useKyc((s) => s.selectedCountry);
+  const selectedIdType = useKyc((s) => s.selectedIdType);
+  const multiIdSlots = useKyc((s) => s.multiIdSlots);
+  const [busySlot, setBusySlot] = useState<string | null>(null);
+  const [pickingSlot, setPickingSlot] = useState<RequestedSupportingDocument | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  // Which card the message belongs to. A failed upload is about ONE document
+  // and reads as noise anywhere else; a picker error belongs to no card and
+  // keeps its place under the list.
+  const [errorSlot, setErrorSlot] = useState<string | null>(null);
+
+  const slots = useMemo(
+    () =>
+      resolveSupportingDocuments(
+        config.supportingDocuments,
+        verifiedIdsFor({
+          country: selectedCountry ?? config.country,
+          idType: selectedIdType,
+          multiIdSlots,
+        }),
+      ),
+    [config.supportingDocuments, config.country, selectedCountry, selectedIdType, multiIdSlots],
+  );
+  const missing = slots.filter((s) => s.required && !uploaded.some((d) => d.type === s.key));
+
+  const attach = useCallback(
+    async (slot: RequestedSupportingDocument, uri: string, mimeType: string | undefined, name: string) => {
+      setBusySlot(slot.key);
+      setError(null);
+      setErrorSlot(null);
+      try {
+        // A PDF is passed through untouched — re-encoding would destroy the
+        // text the server reads off it.
+        const isPdf = (mimeType ?? '').toLowerCase().startsWith('application/pdf');
+        const finalUri = isPdf ? uri : await compressDocumentImage(uri).catch(() => uri);
+        const mediaId = await withRetry(() =>
+          store.getState().api.upload({ uri: finalUri, type: mimeType, name }, 'supporting_document'),
+        );
+        store.getState().setSupportingDocument({
+          type: slot.key,
+          mediaId,
+          fileName: name,
+          // Seeing the file back is how somebody catches the wrong photo from
+          // the camera roll before submitting. A PDF has no preview to show.
+          ...(isPdf ? { isPdf: true } : { previewUri: finalUri }),
+        });
+      } catch {
+        setError(`We could not upload ${slot.label.toLowerCase()}. Please try again.`);
+        setErrorSlot(slot.key);
+      } finally {
+        setBusySlot(null);
+      }
+    },
+    [store],
+  );
+
+  // A picker failure belongs to no card, so it clears the slot the last upload
+  // error was pinned to — otherwise it would surface under an unrelated
+  // document.
+  const reportPickerError = useCallback((message: string | null) => {
+    setErrorSlot(null);
+    setError(message);
+  }, []);
+
+  const { takePhoto, choosePhoto, chooseFile } = useBusinessDocumentAttach(attach, reportPickerError);
+
+  const handleContinue = (): void => {
+    if (missing.length > 0 || busySlot !== null) return;
+    store.getState().nextStep();
+  };
+
+  const optionalOnly = slots.every((slot) => !slot.required);
+
+  return (
+    <View>
+      {slots.map((slot, i) => {
+        const doc = uploaded.find((d) => d.type === slot.key);
+        return (
+          <SupportingDocumentCard
+            key={slot.key}
+            position={i + 1}
+            total={slots.length}
+            label={slot.label}
+            description={slot.description}
+            required={slot.required}
+            reads={slot.reads}
+            fileName={doc?.fileName ?? null}
+            uploading={busySlot === slot.key}
+            previewUri={doc?.previewUri ?? null}
+            isPdf={doc?.isPdf ?? false}
+            error={errorSlot === slot.key ? error : null}
+            onPick={() => setPickingSlot(slot)}
+            onRemove={() => store.getState().removeSupportingDocument(slot.key)}
+          />
+        );
+      })}
+
+      {error && errorSlot === null ? (
+        <MyazaText variant="bodySmall" color={colors.error} style={{ marginBottom: spacing.sm }}>
+          {error}
+        </MyazaText>
+      ) : null}
+
+      <View style={{ height: spacing.xs }} />
+      <MyazaButton
+        label={optionalOnly && uploaded.length === 0 ? 'Skip' : 'Continue'}
+        onPress={handleContinue}
+        disabled={missing.length > 0 || busySlot !== null}
+      />
+
+      {/* THE SAME sheet as Proof of Address and the business documents, so
+          uploading a document feels the same everywhere in the flow. */}
+      <MediaSourceSheet
+        open={pickingSlot !== null}
+        title="Upload your document"
+        onClose={() => setPickingSlot(null)}
+        options={[
+          {
+            icon: 'image',
+            label: 'Photo library',
+            caption: 'Pick a photo you already have',
+            onPress: () => {
+              const slot = pickingSlot;
+              setPickingSlot(null);
+              if (slot) void choosePhoto(slot);
+            },
+          },
+          {
+            icon: 'camera',
+            label: 'Take a photo',
+            caption: 'Photograph the document now',
+            onPress: () => {
+              const slot = pickingSlot;
+              setPickingSlot(null);
+              if (slot) void takePhoto(slot);
+            },
+          },
+          {
+            icon: 'file-text',
+            label: 'Choose a file',
+            caption: 'A PDF or image from your files',
+            onPress: () => {
+              const slot = pickingSlot;
+              setPickingSlot(null);
+              if (slot) void chooseFile(slot);
+            },
+          },
+        ]}
+      />
+    </View>
+  );
+}

package/src/screens/consent/model.ts

@@ -5,6 +5,7 @@ import { fillTokens } from '../../utils/tokens';
 import { hasEmailVerificationStep, hasPhoneVerificationStep } from '../../config/contact';
 import { hasActiveQuestionnaire } from '../../config/questionnaire';
 import { hasProofOfAddressStep } from '../../config/proofOfAddress';
+import { mayAskSupportingDocuments } from '../../config/supportingDocuments';
 import { hasAddressCollectionStep } from '../../config/addressCollection';
 import {
   hasApplicantVerification,
@@ -70,11 +71,17 @@ const SCOPE_DESCRIPTIONS: Record<string, string> = {
     'We need to re-confirm the email address and phone number on your account. This takes a minute and is secure.',
 };
 
+// The address scope's bullets are NOT a fixed pair: it verifies an address by
+// the pin, by a document, or by both, so promising a map on a flow that only
+// asks for a document is a promise the flow never keeps. Gated below on the
+// same step-order predicate the flow itself walks; the document's own bullet is
+// appended by the shared post-capture block, like every other flow's.
+const ADDRESS_PIN_BULLETS: ConsentProcessStep[] = [
+  { icon: 'map-pin-house', label: 'Pin your home address on a map' },
+  { icon: 'badge-check', label: 'Confirm the details only you can know' },
+];
+
 const SCOPE_BULLETS: Record<string, ConsentProcessStep[]> = {
-  address: [
-    { icon: 'map-pin-house', label: 'Pin your home address on a map' },
-    { icon: 'badge-check', label: 'Confirm the details only you can know' },
-  ],
   'biometric-authentication': [
     { icon: 'scan-face', label: 'Take a quick selfie with liveness checks' },
     { icon: 'badge-check', label: 'We match it against your enrolled face' },
@@ -123,7 +130,11 @@ export function buildConsentModel(config: MyazaKYCConfig): ConsentModel {
     : scope
       ? // COPY the catalogue entry: pushing below would otherwise mutate the
         // shared constant, appending one more bullet per re-render.
-        [...(SCOPE_BULLETS[scope] ?? [])]
+        scope === 'address'
+          ? hasAddressCollectionStep(config.addressCollection)
+            ? [...ADDRESS_PIN_BULLETS]
+            : []
+          : [...(SCOPE_BULLETS[scope] ?? [])]
       : [
         { icon: 'badge-check', label: 'Verify your government-issued ID' },
         { icon: 'user', label: 'Collect basic personal information' },
@@ -153,6 +164,12 @@ export function buildConsentModel(config: MyazaKYCConfig): ConsentModel {
   // Post-capture features, in the order the flow runs them. Each is gated on
   // the flow that actually asks for it, and skipped where a scope's own
   // catalogue bullet already covers the same step.
+  // `mayAsk`, NOT the step-order predicate: that one resolves against the
+  // verified IDs and consent runs before an ID is picked, so every scoped
+  // document would answer "nothing to ask for" and go undisclosed.
+  if (!isBusiness && mayAskSupportingDocuments(config.supportingDocuments)) {
+    steps.push({ icon: 'file-text', label: 'Upload supporting documents' });
+  }
   if (!isBusiness && hasProofOfAddressStep(config.proofOfAddress)) {
     steps.push({ icon: 'file-text', label: 'Upload a proof of address document' });
   }

package/src/screens/document/CaptureCheckNotice.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../../config/theme';
+import { MyazaAlert } from '../../components/MyazaAlert';
+import { MyazaButton } from '../../components/MyazaButton';
+import { documentReviewCopy } from '../../components/documentReviewCopy';
+import {
+  CAPTURE_CHECK_CONTINUE_ANYWAY,
+  CAPTURE_CHECK_TITLE,
+  captureProblemMessage,
+  captureRetakeLabel,
+  captureRetakeSides,
+  type CaptureProblem,
+} from '../../lib/documentCaptureCheck';
+import type { DocumentCaptureSide } from '../../services/api-types';
+
+// ─── The review footer when a document photo will not read ───────────────────
+//
+// Shown in place of Continue after the server's capture check found no face on
+// the printed photo or no readable barcode (lib/documentCaptureCheck). The
+// words come from that module so they stay in lockstep with the web and
+// Flutter SDKs.
+//
+// A notice, never a gate: the detectors can miss, so "Continue anyway" is
+// always offered and moves on with the photos already uploaded. The first
+// retake is the primary action because a retake is the likelier fix.
+
+export function CaptureCheckNotice({
+  problems,
+  uploadOnly,
+  onRetake,
+  onContinueAnyway,
+}: {
+  problems: readonly CaptureProblem[];
+  /** The sides were picked from the device, so they are replaced, not retaken. */
+  uploadOnly: boolean;
+  onRetake: (side: DocumentCaptureSide) => void;
+  onContinueAnyway: () => void;
+}): React.ReactElement {
+  // Once per kind: two sides with the same problem need one sentence, not two.
+  const messages = [...new Set(problems.map((p) => captureProblemMessage(p.kind)))];
+  const sides = captureRetakeSides(problems);
+  const copy = documentReviewCopy(uploadOnly ? 'upload' : 'scan', true);
+
+  return (
+    <View style={{ gap: spacing.sm }}>
+      {/* Grouped and announced: the notice replaces the button the applicant
+          just pressed, so a screen reader has to say why nothing moved on. */}
+      <View
+        accessible
+        accessibilityRole="alert"
+        accessibilityLiveRegion="polite"
+        accessibilityLabel={`${CAPTURE_CHECK_TITLE}. ${messages.join(' ')}`}
+      >
+        <MyazaAlert variant="warning" title={CAPTURE_CHECK_TITLE} message={messages.join('\n\n')} />
+      </View>
+      {sides.map((side, i) => (
+        <MyazaButton
+          key={side}
+          label={captureRetakeLabel(side, uploadOnly)}
+          variant={i === 0 ? 'primary' : 'outline'}
+          leadingIcon="refresh"
+          accessibilityLabel={copy.redoAccessibility(side === 'front' ? 'Front' : 'Back')}
+          onPress={() => onRetake(side)}
+        />
+      ))}
+      <MyazaButton
+        label={CAPTURE_CHECK_CONTINUE_ANYWAY}
+        variant="outline"
+        accessibilityLabel={CAPTURE_CHECK_CONTINUE_ANYWAY}
+        accessibilityHint="Carries on with these photos as they are"
+        onPress={onContinueAnyway}
+      />
+    </View>
+  );
+}

package/src/screens/document/UploadPhase.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { ActivityIndicator, Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { MyazaText } from '../../components/Typography';
+import { Icon, type IconName } from '../../components/Icon';
+import { DashedBorder } from '../../components/DashedBorder';
+import type { DocumentCapturePhase } from '../../store/state';
+import { RequiredPill } from './RequiredPill';
+
+// ─── Document capture without the camera ──────────────────────────────────────
+//
+// One side of the document when the workflow switches scanning off
+// (`allowDocumentScan: false`): a photo chosen from the device, never a camera
+// shot. It renders in place of the camera gates, and nothing here touches
+// VisionCamera, so an upload-only flow never asks for camera access and never
+// records a capture video.
+//
+// Only the ASK differs. What happens after the pick is the step's own and shared
+// with the camera path: the interactive cropper, the compress, the MRZ read off
+// the front, the front preview and the review.
+
+/** The sheet header for an upload-only capture phase (see documentCaptureMeta). */
+export function documentUploadMeta(
+  phase: DocumentCapturePhase,
+  documentLabel: string,
+): { title: string; description: string } {
+  switch (phase) {
+    case 'front':
+      return {
+        title: `Upload Your ${documentLabel}`,
+        description: `Choose a clear photo of your ${documentLabel} from your device.`,
+      };
+    case 'front-preview':
+      return {
+        title: 'Front Side Added',
+        description: 'Looks good? Tap Next to add a photo of the back.',
+      };
+    case 'back':
+      return {
+        title: 'Upload Back Side',
+        description: `Now choose a photo of the back of your ${documentLabel}.`,
+      };
+    case 'review':
+    default:
+      return {
+        title: `Review Your ${documentLabel}`,
+        description: 'Tap Continue to upload and submit your document.',
+      };
+  }
+}
+
+const TIPS: ReadonlyArray<{ icon: IconName; label: string }> = [
+  { icon: 'id-card', label: 'The whole document in view, all four corners' },
+  { icon: 'sun', label: 'Sharp and evenly lit, with no glare' },
+];
+
+export interface UploadPhaseProps {
+  isBack: boolean;
+  documentLabel: string;
+  isTwoSided: boolean;
+  /** A picked photo is being cropped and compressed. */
+  busy: boolean;
+  onUpload: () => void;
+}
+
+export function UploadPhase(p: UploadPhaseProps): React.ReactElement {
+  const { colors } = useTheme();
+  const subject = !p.isTwoSided ? `your ${p.documentLabel}` : p.isBack ? 'the back' : 'the front';
+  const ask = `Add a photo of ${subject}`;
+  const choose = () => {
+    if (!p.busy) p.onUpload();
+  };
+
+  return (
+    <View>
+      <RequiredPill
+        documentLabel={p.documentLabel}
+        sideBadge={p.isTwoSided ? (p.isBack ? 'Back Side' : 'Front Side') : undefined}
+        stepLabel={p.isTwoSided ? (p.isBack ? 'Step 2 of 2' : 'Step 1 of 2') : undefined}
+      />
+      {p.isBack ? (
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: spacing.sm, marginBottom: spacing.xs }}>
+          <Icon name="credit-card" size={14} color={colors.primary} />
+          <View style={{ width: 4 }} />
+          <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '500' }}>
+            Turn the card over and add a photo of the other side
+          </MyazaText>
+        </View>
+      ) : null}
+      <View style={{ height: spacing.md }} />
+
+      {/* The whole card is the target and there is no button beside it: on a
+          screen whose only job is to open the photo picker, the card is where
+          the thumb goes. A press deepens the fill and solidifies the border;
+          the primary line at the bottom says what a tap does. */}
+      <Pressable
+        testID={`kyc.document.upload.${p.isBack ? 'back' : 'front'}`}
+        onPress={choose}
+        disabled={p.busy}
+        accessibilityRole="button"
+        accessibilityLabel={p.busy ? 'Preparing your photo' : ask}
+        accessibilityHint="Opens your photos"
+        accessibilityState={{ busy: p.busy, disabled: p.busy }}
+        style={({ pressed }) => ({
+          alignItems: 'center',
+          paddingVertical: spacing.xl,
+          paddingHorizontal: spacing.lg,
+          borderRadius: radius.md,
+          backgroundColor: pressed ? `${colors.primary}1A` : `${colors.primary}0D`,
+          transform: [{ scale: pressed ? 0.99 : 1 }],
+        })}
+      >
+        {({ pressed }) => (
+          <>
+            <DashedBorder
+              color={pressed ? colors.primary : `${colors.primary}66`}
+              radius={radius.md}
+              strokeWidth={1.5}
+            />
+            <View
+              style={{
+                width: 64,
+                height: 64,
+                borderRadius: radius.full,
+                backgroundColor: `${colors.primary}1A`,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              {p.busy ? (
+                <ActivityIndicator size="small" color={colors.primary} />
+              ) : (
+                <Icon name="image" size={30} color={colors.primary} />
+              )}
+            </View>
+            <View style={{ height: spacing.md }} />
+            <MyazaText variant="heading3" style={{ textAlign: 'center' }}>
+              {p.busy ? 'Preparing your photo…' : ask}
+            </MyazaText>
+            <View style={{ height: spacing.xs }} />
+            <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ textAlign: 'center' }}>
+              Choose a clear photo from your device. You can crop it on the next screen.
+            </MyazaText>
+            <View style={{ height: spacing.md }} />
+            {/* Stays in the layout while busy so the card keeps its height. */}
+            <View
+              style={{ flexDirection: 'row', alignItems: 'center', opacity: p.busy ? 0 : 1 }}
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+            >
+              <Icon name="upload" size={16} color={colors.primary} />
+              <View style={{ width: spacing.xs }} />
+              <MyazaText variant="label" color={colors.primary} style={{ fontWeight: '600' }}>
+                Tap to choose a photo
+              </MyazaText>
+              <View style={{ width: 2 }} />
+              <Icon name="chevron-right" size={16} color={colors.primary} />
+            </View>
+          </>
+        )}
+      </Pressable>
+
+      <View style={{ height: spacing.md }} />
+      {TIPS.map((tip) => (
+        <View key={tip.label} style={{ flexDirection: 'row', alignItems: 'center', marginBottom: spacing.xs }}>
+          <Icon name={tip.icon} size={16} color={colors.textMuted} />
+          <View style={{ width: spacing.sm }} />
+          <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ flexShrink: 1 }}>
+            {tip.label}
+          </MyazaText>
+        </View>
+      ))}
+    </View>
+  );
+}