Add IDDataScreen and ManageDocumentsScreen (WV-14)#1878
Conversation
…422) Screen migration for WV-14. Adds 2 euclid screen wrappers with mock data for the UI mocking pass. - IDDataScreen at /id-data with ExposedIDCard, identification details, document data - ManageDocumentsScreen at /manage-documents with document list and manage dialogue - Wire Settings > Manage Documents to /manage-documents instead of /coming-soon - Add preview.html for phone-frame screen verification during development
📝 WalkthroughWalkthroughAdds two new screens ( Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
transphorm
changed the title
💡 Codex Reviewself/packages/webview-bridge/src/adapters/sdk-adapter-map.ts Lines 47 to 50 in c5572db  Map SDK route names before calling navigate
The new navigation adapter treats self/packages/webview-app/src/screens/onboarding/TourScreen.tsx Lines 19 to 20 in c5572db Route tour completion through document selection
Step 4 currently sends users directly to ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
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". |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: cb7ee66f-88b5-4087-a679-b944efae5b62
📒 Files selected for processing (6)
packages/webview-app/src/App.tsxpackages/webview-app/src/components/DevRouteMenu.tsxpackages/webview-app/src/screens/account/SettingsScreen.tsxpackages/webview-app/src/screens/home/IDDataScreen.tsxpackages/webview-app/src/screens/home/ManageDocumentsScreen.tsxpackages/webview-app/tests/screens/home/homeSupportScreens.test.tsx
| const onDocumentPress = useCallback(() => { | ||
| haptic.trigger('selection'); | ||
| setDialogue({ | ||
| title: 'Manage Document', | ||
| description: 'View details or remove this document from your Self ID.', | ||
| }); |
There was a problem hiding this comment.
Remove action is currently a no-op.
On Line 45-Line 49, onRemoveId only dismisses the dialog; it never removes anything from the list defined on Line 61-Line 68. This makes the destructive action non-functional in UI flow.
Proposed fix
import type React from 'react';
import { useCallback, useState } from 'react';
import { useNavigate } from 'react-router-dom';
@@
export const ManageDocumentsScreen: React.FC = () => {
const navigate = useNavigate();
const { analytics, haptic } = useSelfClient();
const [dialogue, setDialogue] = useState<{ title: string; description: string } | undefined>();
+ const [selectedDocumentId, setSelectedDocumentId] = useState<string | undefined>();
+ const [documents, setDocuments] = useState([
+ {
+ id: 'mock-passport',
+ label: 'Passport',
+ description: 'Registered',
+ },
+ ]);
@@
- const onDocumentPress = useCallback(() => {
+ const onDocumentPress = useCallback((id: string) => {
haptic.trigger('selection');
+ setSelectedDocumentId(id);
setDialogue({
title: 'Manage Document',
description: 'View details or remove this document from your Self ID.',
});
}, [haptic]);
@@
const onRemoveId = useCallback(() => {
haptic.trigger('warning');
analytics.trackEvent('manage_docs_remove_pressed');
+ if (selectedDocumentId) {
+ setDocuments(prev => prev.filter(doc => doc.id !== selectedDocumentId));
+ }
+ setSelectedDocumentId(undefined);
setDialogue(undefined);
- }, [haptic, analytics]);
+ }, [haptic, analytics, selectedDocumentId]);
@@
documents={[
- {
- id: 'mock-passport',
- label: 'Passport',
- description: 'Registered',
- onPress: onDocumentPress,
- },
+ ...documents.map(doc => ({
+ ...doc,
+ onPress: () => onDocumentPress(doc.id),
+ })),
]}Also applies to: 45-49, 61-68
2 participants
Summary
IDDataScreenandManageDocumentsScreenusing Euclid shared components, with routes registered in the webview-app router/manage-documentsrouteChanges
WebView App
/id-data) — renders passport ID card details and document data viaEuclidIDDataScreen, with navigation to manage documents/manage-documents) — lists registered documents with a dialogue for view/remove actions, usingEuclidManageDocumentsScreen/manage-documentsinstead of/coming-soonLinear Issues
Test Plan
cd packages/webview-app && yarn buildpassesyarn lint && yarn typespasses/manage-documentsfrom Settings and verify screen renders/id-datascreen renders with mock passport data🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Tests