feat(pos-app): scan Customer API key via QR code - #626
Draft
ignaciosantise wants to merge 2 commits into
Draft
ignaciosantise wants to merge 2 commits into
ignaciosantise wants to merge 2 commits into
Conversation
Add a camera-based QR scanner for entering the Customer API key in Settings, so merchants don't have to type long secrets on a POS device. - New full-screen expo-router route `app/scan-api-key.tsx` using expo-camera (one lib across iOS/Android/web); camera bound to `useIsFocused` so it releases on leave; permission + denied states handled. - Viewfinder overlay (dimmed mask + square + corner brackets) built from plain Views via `components/scan-corners.tsx` (pos-app has no react-native-svg). - Scan button (tint-able `scan.png` icon) added to the Customer API key sheet; hidden on camera-less hardware via `hooks/use-has-camera.ts` (web: CameraView.isAvailableAsync; android: device-info isCameraPresent; ios: assume present). - On a successful scan, auto-save through the existing PIN/biometric gate: the value is handed back via a transient store (`store/usePendingApiKeyScanStore.ts`) and run through `handleScannedCustomerApiKey` in `hooks/use-merchant-flow.ts`. QR payload is treated as a plain key string, isolated in `utils/parse-api-key-qr.ts`. - Add expo-camera dep + config plugin (camera permission). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
Claude finished @ignaciosantise's task in 2m 4s —— View job Code Review in Progress
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds a camera-based QR scanner for entering the Customer API key in pos-app Settings, so merchants don't have to type a long secret on a POS device.
Tapping the scan icon (right of the API-key input) opens a full-screen camera; on a successful scan the value auto-saves through the existing PIN/biometric gate.
How
app/scan-api-key.tsx— full-screenexpo-routerroute using expo-camera (one library across iOS/Android/web). Camera is bound touseIsFocusedso it releases when the screen pops; permission request + denied ("Open settings") states handled; a ref guards against double-fires.components/scan-corners.tsx— viewfinder overlay (dimmed mask + transparent square + corner brackets) built from plain Views, since pos-app has noreact-native-svg.assets/images/scan.pngicon (matches the app's icon pattern). Hidden on camera-less hardware viahooks/use-has-camera.ts(web:CameraView.isAvailableAsync; android:react-native-device-infoisCameraPresent; iOS: assume present).store/usePendingApiKeyScanStore.ts), pops back, andsettings.tsxruns it throughhandleScannedCustomerApiKey→ the existinginitiateSavePIN/biometric flow inhooks/use-merchant-flow.ts.utils/parse-api-key-qr.tsso the format is trivial to adjust later.expo-camera+ its config plugin (camera permission → iOSNSCameraUsageDescription, AndroidCAMERA). pos-app is pure CNG, so it applies at prebuild.Notes
Testing
expo lintclean; existing jest suite unaffected.🤖 Generated with Claude Code