fix proof request perk logos and ineligible-document UX

[transphorm]

Summary

• Replace the bespoke perk-eligibility row with the shared PerkRail so multi-perk logos fan out side-by-side instead of stacking inside one circle, and the dense vs minimal variant matches Figma.
• Always show eligible perks in the ID picker (not just on the active row) and frame any row that has perks, so users can see which docs unlock perks before selecting.
• Surface ineligible-document state on the bottom action bar with reason-specific copy (needs_nfc, unsupported_id_type) and a tap-to-change-ID helper row.
• Backfill missing test coverage and fix the screen test that broke when PerkEligibilityRow started consuming PerkRail.

Changes

React Native app

• BottomActionBar: pin the selector to a rounded-60 pill (per Figma 26164:20557), drop the screen-height-dependent dynamic padding, and add an ineligible state with helper row, reason label, and INELIGIBLE pill replacing the security label.
• PerkEligibilityRow: thin wrapper around the SDK PerkRail; picks minimal vs dense variant from logo count and strips bottom radius for inline rows.
• IDSelectorSheet: show perk row on any eligible non-disabled doc (not just the active one) and apply the framed border whenever a row is active or carries perks.
• DocumentSelectorForProvingScreen: thread selectedIneligibleReason into the action bar and map needs_nfc / unsupported_id_type to user-visible helper copy.

SDK core

• PerkRail: expose a testID prop on both the Pressable and View branches.

Tests

• New suites for BottomActionBar, PerkEligibilityRow, and PerkRail covering the perk-row, ineligible-state, and logo-fanning behavior.
• Extend IDSelectorSheet tests with the cross-row perk eligibility cases and the framed-border path.
• Extend DocumentSelectorForProvingScreen tests with reason-to-helper-copy assertions and add PerkRail to the SDK component mock (fixes the broken suite).
• Add a shared PerkRail factory to tests/__setup__/mocks/ui.js.

Test Plan

• yarn jest:run — 96 suites / 1083 tests pass
• yarn lint
• Manual: open a Google USAT proof request with (a) an eligible passport, (b) an ineligible Aadhaar — verify the helper row copy, INELIGIBLE pill, and that the picker shows perks on the eligible row regardless of selection.

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Perk eligibility now displayed for all eligible documents, not just the selected one
  • Ineligible state UI added with specific reason explanations (e.g., "Needs an NFC-enabled passport," "This ID type isn't supported")
  • Helper row with guidance text displayed when a document is ineligible

• Tests

  • Added comprehensive test coverage for ineligible state scenarios and perk eligibility display

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
self-webview-app	Ignored	Preview	May 21, 2026 4:03am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b141d2a0-3bd9-4bd7-b857-27c9adb443b7

📥 Commits

Reviewing files that changed from the base of the PR and between 1d1ac07 and 47c363e.

📒 Files selected for processing (4)

• app/src/components/documents/IDSelectorSheet.tsx
• app/src/screens/verification/DocumentSelectorForProvingScreen.tsx
• app/tests/src/components/documents/IDSelectorSheet.test.tsx
• app/tests/src/screens/verification/DocumentSelectorForProvingScreen.test.tsx

---

📝 Walkthrough

Walkthrough

This PR refactors perk display to use a shared PerkRail component, adds testID support for testability, implements an ineligible document state with user-facing reason labels and a "Change ID" helper row, and enables perks to display on eligible-but-inactive documents. Changes span SDK component updates, component refactoring, visibility logic, UI state, and screen-level wiring.

Changes

Ineligibility flow and perk rail integration

Layer / File(s)	Summary
PerkRail testID support packages/mobile-sdk-alpha/src/components/data-display/PerkRail.tsx, packages/mobile-sdk-alpha/tests/components/data-display/PerkRail.test.tsx	PerkRailProps adds optional testID forwarded to the rendered Pressable or View; regression test verifies dense variant wraps each logo in a distinct parent.
PerkEligibilityRow refactoring to use PerkRail app/src/components/proof-request/PerkEligibilityRow.tsx, app/tests/src/components/proof-request/PerkEligibilityRow.test.tsx	PerkEligibilityRow now renders a PerkRail (dense vs minimal by logo count) and applies inline-variant bottom-radius overrides; tests validate logo fan-out and variant styling.
IDSelectorSheet perk eligibility logic app/src/components/documents/IDSelectorSheet.tsx, app/tests/src/components/documents/IDSelectorSheet.test.tsx	Per-document eligibleForPerks is evaluated; perkSlot is derived for eligible documents and passed into IDSelectorItem; framing and shadow apply when active or when perks exist; tests cover perk visibility and interactions for eligible/ineligible docs.
BottomActionBar ineligible state and helper row app/src/components/proof-request/BottomActionBar.tsx, app/tests/src/components/proof-request/BottomActionBar.test.tsx	Adds ineligible, ineligibleReasonLabel, and testID props; simplifies padding; always-renders rounded document selector pill; shows "Ineligible" pill when set; renders perk attachment container and a conditional ineligible helper Pressable with reason and "Change ID" link; tests cover helper copy, fallback, and tap behavior.
DocumentSelectorForProvingScreen ineligibility integration app/src/screens/verification/DocumentSelectorForProvingScreen.tsx, app/tests/src/screens/verification/DocumentSelectorForProvingScreen.test.tsx	Adds getIneligibleReasonLabel mapping, computes selectedIneligibleReason in continuation gating, and wires BottomActionBar with ineligible and ineligibleReasonLabel; tests assert helper copy for needs_nfc and unsupported_id_type.
Test infrastructure mocks for PerkRail app/tests/__setup__/mocks/ui.js	Global Jest mock for @selfxyz/mobile-sdk-alpha/components adds PerkRail mock that limits rendered logos by variant and exposes testID and label for test assertions.

---

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: fixing proof request perk logo display (consolidating to PerkRail) and addressing ineligible-document UX (adding state, reason labels, and helper row).
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/fix-proof-requested-logos

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[greptile-apps]

Greptile Summary

This PR fixes the proof-request screen so that perk logos are shown on all eligible documents (not just the currently active/selected one) and introduces an "ineligible" state that surfaces an amber "INELIGIBLE" pill and a tappable "Change ID" helper row in BottomActionBar.

• PerkEligibilityRow is refactored to delegate entirely to PerkRail, replacing an ad-hoc single-circle layout with the shared dense/minimal rail that fans logos side-by-side.
• IDSelectorSheet now evaluates eligibleForPerks per document (!isDisabledState && !ineligible) rather than gating on isActive, and applies framing (border + shadow) to any card that carries a perk row.
• BottomActionBar gains ineligible/ineligibleReasonLabel props, removes the screen-height-based dynamic padding, and wraps the perk rail in a separate bordered container below the selector pill.

Confidence Score: 4/5

Safe to merge; all logic changes are well-tested and the only finding is a Unicode apostrophe in one display string.

The perk-eligibility widening and ineligible-state wiring are both correctly implemented and covered by new tests. The only issue found is a Unicode curly apostrophe (U+2019) embedded in a single-quoted string literal in getIneligibleReasonLabel, which compiles fine but silently breaks plain-text search and copy-paste comparisons.

app/src/screens/verification/DocumentSelectorForProvingScreen.tsx — the unsupported_id_type string literal with curly apostrophe.

Important Files Changed

Filename	Overview
app/src/components/proof-request/PerkEligibilityRow.tsx	Clean refactor: all rendering delegated to PerkRail; variant selection (dense vs minimal) based on logo count is correct; inline/attached distinction preserved via style prop override.
packages/mobile-sdk-alpha/src/components/data-display/PerkRail.tsx	Minimal additive change: testID prop threaded through to both the Pressable and View render paths. No behavioral changes.
app/src/components/documents/IDSelectorSheet.tsx	Perk visibility widened from isActive-only to any non-disabled, non-ineligible document; framed styling now follows hasPerks rather than just isActive, giving eligible-but-unselected docs a border and shadow.
app/src/components/proof-request/BottomActionBar.tsx	Added ineligible/ineligibleReasonLabel props with INELIGIBLE pill and Change ID helper row; dynamic padding removed in favor of safeAreaPadding; perk rail now sits in its own bordered container below the pill.
app/src/screens/verification/DocumentSelectorForProvingScreen.tsx	Added getIneligibleReasonLabel helper and wires ineligible state to BottomActionBar; unsupported_id_type string uses a Unicode curly apostrophe (U+2019) which is unusual and can cause search/maintenance friction.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[DocumentSelectorForProvingScreen] -->|selectedIneligibleReason| B[BottomActionBar]
    B -->|ineligible=true| C{Render branch}
    C -->|pill| D[INELIGIBLE amber pill replaces security label]
    C -->|helper row| E[Change ID row with ineligibleReasonLabel]
    E -->|tap| F[onDocumentSelectorPress opens IDSelectorSheet]
    A -->|perksByDocumentId| G[IDSelectorSheet]
    G -->|per doc eligibleForPerks| H{Show perk row?}
    H -->|yes| I[PerkEligibilityRow variant=inline]
    H -->|no| J[perkSlot = undefined]
    I --> K[PerkRail dense or minimal based on logo count]
    I -->|framed=true| L[Outer border and shadow applied to card]

Loading

_{Reviews (1): Last reviewed commit: "fix design" | Re-trigger Greptile}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1d1ac07e5d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".